@byldpartners/ui 0.0.1

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScrollArea } from "./ScrollArea.web";
+
+const meta: Meta<typeof ScrollArea> = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollArea>;
+
+export const Default: Story = {
+  render: () => (
+    <ScrollArea style={{ height: 200, width: 300 }}>
+      <div style={{ padding: 16 }}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris.
+        </p>
+        <p>
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident.
+        </p>
+        <p>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis.
+        </p>
+        <p>
+          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+          fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+          sequi nesciunt.
+        </p>
+        <p>
+          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+          consectetur, adipisci velit, sed quia non numquam eius modi tempora
+          incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+        </p>
+      </div>
+    </ScrollArea>
+  ),
+};

package/src/components/ScrollArea/ScrollArea.types.ts

@@ -0,0 +1,11 @@
+export interface ScrollAreaProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export type ScrollBarOrientation = "vertical" | "horizontal";
+
+export interface ScrollBarProps {
+  orientation?: ScrollBarOrientation;
+  className?: string;
+}

package/src/components/ScrollArea/ScrollArea.web.test.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ScrollArea } from "./ScrollArea.web";
+
+describe("ScrollArea", () => {
+  it("renders children", () => {
+    render(<ScrollArea>Scrollable content</ScrollArea>);
+    expect(screen.getByText("Scrollable content")).toBeDefined();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <ScrollArea className="h-48 w-96">Content</ScrollArea>,
+    );
+    const root = container.firstChild as HTMLElement;
+    expect(root.className).toContain("h-48");
+    expect(root.className).toContain("w-96");
+  });
+});

package/src/components/ScrollArea/ScrollArea.web.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../utils/cn";
+
+const ScrollArea = forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/components/ScrollArea/index.native.ts

@@ -0,0 +1,2 @@
+export { ScrollArea, ScrollBar } from "./ScrollArea.native";
+export type { ScrollAreaProps, ScrollBarProps } from "./ScrollArea.types";

package/src/components/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+export { ScrollArea, ScrollBar } from "./ScrollArea.web";
+export type { ScrollAreaProps, ScrollBarProps } from "./ScrollArea.types";

package/src/components/Select/Select.native.tsx

@@ -0,0 +1,203 @@
+import { createContext, useContext } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  type ViewProps,
+} from "react-native";
+import { ChevronDown, Check } from "lucide-react-native";
+import type { SelectProps } from "./Select.types";
+import { useSelect } from "./useSelect";
+import { Icon } from "../Icon/Icon.native";
+import { cn } from "../../utils/cn";
+
+interface SelectContextValue {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const SelectContext = createContext<SelectContextValue>({
+  value: undefined,
+  onValueChange: () => {},
+  open: false,
+  setOpen: () => {},
+});
+
+interface SelectNativeProps extends SelectProps {}
+
+function Select({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  children,
+}: SelectNativeProps) {
+  const { value, onValueChange: handleValueChange, open, setOpen } = useSelect({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+  });
+
+  return (
+    <SelectContext.Provider
+      value={{ value, onValueChange: handleValueChange, open, setOpen }}
+    >
+      {children}
+    </SelectContext.Provider>
+  );
+}
+
+interface SelectTriggerNativeProps extends ViewProps {
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+function SelectTrigger({
+  children,
+  disabled = false,
+  style,
+  ...props
+}: SelectTriggerNativeProps) {
+  const { setOpen } = useContext(SelectContext);
+
+  return (
+    <Pressable
+      onPress={() => !disabled && setOpen(true)}
+      disabled={disabled}
+      className={cn(
+        "flex-row items-center justify-between h-9 w-full rounded-md border border-input px-3 py-2 bg-transparent shadow-sm elevation-1",
+        disabled && "opacity-50"
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+      <View className="opacity-50">
+        <Icon icon={ChevronDown} size={16} className="text-muted-foreground" />
+      </View>
+    </Pressable>
+  );
+}
+
+interface SelectValueNativeProps {
+  placeholder?: string;
+}
+
+function SelectValue({ placeholder }: SelectValueNativeProps) {
+  const { value } = useContext(SelectContext);
+
+  return (
+    <Text
+      className={cn(
+        "text-sm leading-none flex-1",
+        value ? "text-foreground" : "text-muted-foreground"
+      )}
+    >
+      {value || placeholder}
+    </Text>
+  );
+}
+
+interface SelectContentNativeProps {
+  children?: React.ReactNode;
+}
+
+function SelectContent({ children }: SelectContentNativeProps) {
+  const { open, setOpen } = useContext(SelectContext);
+
+  return (
+    <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+      <Pressable
+        onPress={() => setOpen(false)}
+        className="flex-1 justify-center items-center"
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      >
+        <Pressable
+          onPress={(e) => e.stopPropagation()}
+          className="bg-popover rounded-lg p-1 min-w-[200px] max-h-[300px] shadow-md elevation-3"
+        >
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+interface SelectItemNativeProps {
+  value: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+function SelectItem({ value, disabled = false, children }: SelectItemNativeProps) {
+  const ctx = useContext(SelectContext);
+  const isSelected = ctx.value === value;
+
+  return (
+    <Pressable
+      onPress={() => !disabled && ctx.onValueChange(value)}
+      disabled={disabled}
+      className={cn(
+        "flex-row items-center py-1.5 pl-2 pr-8 rounded-sm",
+        isSelected ? "bg-secondary" : "bg-transparent",
+        disabled && "opacity-50"
+      )}
+    >
+      <Text className="text-sm text-foreground flex-1">
+        {children}
+      </Text>
+      {isSelected && (
+        <Icon icon={Check} size={16} className="text-foreground" />
+      )}
+    </Pressable>
+  );
+}
+
+interface SelectGroupNativeProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+function SelectGroup({ children, ...props }: SelectGroupNativeProps) {
+  return <View {...props}>{children}</View>;
+}
+
+interface SelectLabelNativeProps {
+  children?: React.ReactNode;
+}
+
+function SelectLabel({ children }: SelectLabelNativeProps) {
+  return (
+    <Text className="text-sm font-semibold px-3 py-1.5 text-foreground">
+      {children}
+    </Text>
+  );
+}
+
+function SelectSeparator() {
+  return (
+    <View className="h-px bg-border my-1 -mx-1" />
+  );
+}
+
+Select.displayName = "Select";
+SelectTrigger.displayName = "SelectTrigger";
+SelectValue.displayName = "SelectValue";
+SelectContent.displayName = "SelectContent";
+SelectItem.displayName = "SelectItem";
+SelectGroup.displayName = "SelectGroup";
+SelectLabel.displayName = "SelectLabel";
+SelectSeparator.displayName = "SelectSeparator";
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+};
+export type { SelectNativeProps };

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "./Select.web";
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  tags: ["autodocs"],
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger style={{ width: 180 }}>
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/components/Select/Select.types.ts

@@ -0,0 +1,14 @@
+export interface SelectProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface SelectItemOption {
+  label: string;
+  value: string;
+}

package/src/components/Select/Select.web.tsx

@@ -0,0 +1,204 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../utils/cn";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-4 w-4 opacity-50"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-4 w-4"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};

package/src/components/Select/index.native.ts

@@ -0,0 +1,11 @@
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+} from "./Select.native";
+export type { SelectProps } from "./Select.types";

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export * from "./Select.web";
+export type * from "./Select.types";

package/src/components/Select/useSelect.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useSelect } from "./useSelect";
+
+describe("useSelect", () => {
+  it("defaults to empty string", () => {
+    const { result } = renderHook(() => useSelect({}));
+    expect(result.current.value).toBe("");
+  });
+
+  it("uses defaultValue", () => {
+    const { result } = renderHook(() => useSelect({ defaultValue: "opt-1" }));
+    expect(result.current.value).toBe("opt-1");
+  });
+
+  it("updates value via onValueChange", () => {
+    const { result } = renderHook(() => useSelect({}));
+    act(() => result.current.onValueChange("opt-2"));
+    expect(result.current.value).toBe("opt-2");
+  });
+
+  it("closes dropdown after selecting a value", () => {
+    const { result } = renderHook(() => useSelect({}));
+    act(() => result.current.setOpen(true));
+    expect(result.current.open).toBe(true);
+    act(() => result.current.onValueChange("opt-1"));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls external onValueChange callback", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelect({ onValueChange: onChange }),
+    );
+    act(() => result.current.onValueChange("opt-1"));
+    expect(onChange).toHaveBeenCalledWith("opt-1");
+  });
+});

package/src/components/Select/useSelect.ts

@@ -0,0 +1,33 @@
+import { useState, useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseSelectProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function useSelect({ value, defaultValue = "", onValueChange }: UseSelectProps) {
+  const [currentValue, setCurrentValue] = useControllableState<string>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const [open, setOpen] = useState(false);
+
+  const handleValueChange = useCallback(
+    (val: string) => {
+      setCurrentValue(val);
+      setOpen(false);
+    },
+    [setCurrentValue],
+  );
+
+  return {
+    value: currentValue,
+    onValueChange: handleValueChange,
+    open,
+    setOpen,
+  };
+}