@byldpartners/ui 0.0.1

package/src/components/Carousel/useCarousel.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useCarouselState } from "./useCarousel";
+
+describe("useCarouselState", () => {
+  it("starts at index 0", () => {
+    const { result } = renderHook(() => useCarouselState());
+    expect(result.current.currentIndex).toBe(0);
+  });
+
+  it("defaults to horizontal orientation", () => {
+    const { result } = renderHook(() => useCarouselState());
+    expect(result.current.orientation).toBe("horizontal");
+  });
+
+  it("cannot scroll previous at index 0", () => {
+    const { result } = renderHook(() => useCarouselState());
+    expect(result.current.canScrollPrevious).toBe(false);
+  });
+
+  it("cannot scroll next when totalItems is 0", () => {
+    const { result } = renderHook(() => useCarouselState());
+    expect(result.current.canScrollNext).toBe(false);
+  });
+
+  it("scrolls next", () => {
+    const { result } = renderHook(() => useCarouselState());
+
+    act(() => result.current.setTotalItems(5));
+    act(() => {
+      const pos = result.current.scrollNext();
+      expect(pos.index).toBe(1);
+    });
+    expect(result.current.currentIndex).toBe(1);
+  });
+
+  it("scrolls previous", () => {
+    const { result } = renderHook(() => useCarouselState());
+
+    act(() => result.current.setTotalItems(5));
+    act(() => result.current.scrollNext());
+    act(() => result.current.scrollNext());
+    act(() => {
+      const pos = result.current.scrollPrevious();
+      expect(pos.index).toBe(1);
+    });
+    expect(result.current.currentIndex).toBe(1);
+  });
+
+  it("does not scroll past the last item", () => {
+    const { result } = renderHook(() => useCarouselState());
+
+    act(() => result.current.setTotalItems(2));
+    act(() => result.current.scrollNext());
+    act(() => result.current.scrollNext()); // Should stay at index 1
+    expect(result.current.currentIndex).toBe(1);
+  });
+
+  it("does not scroll before index 0", () => {
+    const { result } = renderHook(() => useCarouselState());
+    act(() => result.current.scrollPrevious());
+    expect(result.current.currentIndex).toBe(0);
+  });
+
+  it("computes scroll position for horizontal", () => {
+    const { result } = renderHook(() => useCarouselState());
+
+    act(() => {
+      result.current.setTotalItems(5);
+      result.current.setItemWidth(200);
+    });
+    act(() => {
+      const pos = result.current.scrollNext();
+      expect(pos.x).toBe(200);
+      expect(pos.y).toBe(0);
+    });
+  });
+
+  it("computes scroll position for vertical", () => {
+    const { result } = renderHook(() =>
+      useCarouselState({ orientation: "vertical" }),
+    );
+
+    act(() => {
+      result.current.setTotalItems(5);
+      result.current.setItemWidth(200);
+    });
+    act(() => {
+      const pos = result.current.scrollNext();
+      expect(pos.x).toBe(0);
+      expect(pos.y).toBe(200);
+    });
+  });
+
+  it("reports canScrollPrevious and canScrollNext correctly", () => {
+    const { result } = renderHook(() => useCarouselState());
+
+    act(() => result.current.setTotalItems(3));
+
+    expect(result.current.canScrollPrevious).toBe(false);
+    expect(result.current.canScrollNext).toBe(true);
+
+    act(() => result.current.scrollNext());
+    expect(result.current.canScrollPrevious).toBe(true);
+    expect(result.current.canScrollNext).toBe(true);
+
+    act(() => result.current.scrollNext());
+    expect(result.current.canScrollPrevious).toBe(true);
+    expect(result.current.canScrollNext).toBe(false);
+  });
+});

package/src/components/Carousel/useCarousel.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from "react";
+import type { CarouselOrientation } from "./Carousel.types";
+
+interface UseCarouselProps {
+  orientation?: CarouselOrientation;
+}
+
+export function useCarouselState({ orientation = "horizontal" }: UseCarouselProps = {}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [totalItems, setTotalItems] = useState(0);
+  const [itemWidth, setItemWidth] = useState(0);
+
+  const canScrollPrevious = currentIndex > 0;
+  const canScrollNext = currentIndex < totalItems - 1;
+
+  const scrollPrevious = useCallback(() => {
+    const newIndex = Math.max(0, currentIndex - 1);
+    setCurrentIndex(newIndex);
+    return {
+      index: newIndex,
+      x: orientation === "horizontal" ? newIndex * itemWidth : 0,
+      y: orientation === "vertical" ? newIndex * itemWidth : 0,
+    };
+  }, [currentIndex, itemWidth, orientation]);
+
+  const scrollNext = useCallback(() => {
+    const newIndex = Math.min(totalItems - 1, currentIndex + 1);
+    setCurrentIndex(newIndex);
+    return {
+      index: newIndex,
+      x: orientation === "horizontal" ? newIndex * itemWidth : 0,
+      y: orientation === "vertical" ? newIndex * itemWidth : 0,
+    };
+  }, [currentIndex, totalItems, itemWidth, orientation]);
+
+  return {
+    orientation,
+    currentIndex,
+    totalItems,
+    setTotalItems,
+    itemWidth,
+    setItemWidth,
+    canScrollPrevious,
+    canScrollNext,
+    scrollPrevious,
+    scrollNext,
+  };
+}

package/src/components/Chart/Chart.native.tsx

@@ -0,0 +1,7 @@
+const ERROR_MESSAGE = "@byldpartners/ui: Chart is not supported on native.";
+
+function Chart(): never {
+  throw new Error(ERROR_MESSAGE);
+}
+
+export { Chart };

package/src/components/Chart/Chart.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Chart } from "./Chart.web";
+import type { ChartConfig } from "./Chart.types";
+
+const meta = {
+  title: "Components/Chart",
+  component: Chart,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Chart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleConfig: ChartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "hsl(221.2 83.2% 53.3%)",
+  },
+  expenses: {
+    label: "Expenses",
+    color: "hsl(0 84.2% 60.2%)",
+  },
+  profit: {
+    label: "Profit",
+    color: "hsl(142.1 76.2% 36.3%)",
+  },
+};
+
+export const Default: Story = {
+  args: { config: sampleConfig },
+  render: () => (
+    <Chart config={sampleConfig} style={{ width: 400, height: 250 }}>
+      <div className="flex h-full flex-col items-center justify-center gap-4">
+        <p className="text-sm text-muted-foreground">
+          Chart container with CSS color variables applied.
+        </p>
+        <div className="flex gap-4">
+          {Object.entries(sampleConfig).map(([key, value]) => (
+            <div key={key} className="flex items-center gap-2">
+              <div
+                className="h-3 w-3 rounded-full"
+                style={{ backgroundColor: `var(--color-${key})` }}
+              />
+              <span className="text-xs">{value.label}</span>
+            </div>
+          ))}
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Wrap Recharts components inside this container for themed charts.
+        </p>
+      </div>
+    </Chart>
+  ),
+};

package/src/components/Chart/Chart.types.ts

@@ -0,0 +1,13 @@
+export interface ChartConfig {
+  [key: string]: {
+    label?: string;
+    color?: string;
+    icon?: React.ComponentType;
+  };
+}
+
+export interface ChartProps {
+  config: ChartConfig;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Chart/Chart.web.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, useMemo } from "react";
+import { cn } from "../../utils/cn";
+import type { ChartConfig, ChartProps } from "./Chart.types";
+
+const Chart = forwardRef<
+  HTMLDivElement,
+  ChartProps & React.HTMLAttributes<HTMLDivElement>
+>(({ className, config, children, ...props }, ref) => {
+  const cssVars = useMemo(() => {
+    const vars: Record<string, string> = {};
+    Object.entries(config).forEach(([key, value]) => {
+      if (value.color) {
+        vars[`--color-${key}`] = value.color;
+      }
+    });
+    return vars;
+  }, [config]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        className,
+      )}
+      style={cssVars as React.CSSProperties}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+Chart.displayName = "Chart";
+
+export { Chart };
+export type { ChartConfig };

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

@@ -0,0 +1,2 @@
+export { Chart } from "./Chart.native";
+export type { ChartProps, ChartConfig } from "./Chart.types";

package/src/components/Chart/index.ts

@@ -0,0 +1,3 @@
+export { Chart } from "./Chart.web";
+export type { ChartConfig } from "./Chart.web";
+export type { ChartProps } from "./Chart.types";

package/src/components/Checkbox/Checkbox.native.tsx

@@ -0,0 +1,47 @@
+import { Pressable, type PressableProps } from "react-native";
+import { Check } from "lucide-react-native";
+import type { CheckboxProps } from "./Checkbox.types";
+import { useCheckbox } from "./useCheckbox";
+import { Icon } from "../Icon/Icon.native";
+import { cn } from "../../utils/cn";
+
+interface CheckboxNativeProps extends CheckboxProps, Omit<PressableProps, "onPress" | "children" | "disabled"> {}
+
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked,
+  onCheckedChange,
+  disabled: disabledProp,
+  ...props
+}: CheckboxNativeProps) {
+  const { checked, disabled, toggle } = useCheckbox({
+    checked: controlledChecked,
+    defaultChecked,
+    onCheckedChange,
+    disabled: disabledProp,
+  });
+
+  return (
+    <Pressable
+      onPress={toggle}
+      disabled={disabled}
+      className={cn(
+        "w-4 h-4 rounded-sm border items-center justify-center shadow-sm elevation-1",
+        checked ? "border-primary bg-primary" : "border-primary bg-transparent",
+        disabled && "opacity-50",
+      )}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+      {...props}
+    >
+      {checked && (
+        <Icon icon={Check} size={12} strokeWidth={3} className="text-primary-foreground" />
+      )}
+    </Pressable>
+  );
+}
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+export type { CheckboxNativeProps };

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Checkbox } from "./Checkbox.web";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,12 @@
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  className?: string;
+  children?: React.ReactNode;
+}

package/src/components/Checkbox/Checkbox.web.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "../../utils/cn";
+
+const Checkbox = forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-3.5 w-3.5"
+      >
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox.native";
+export type { CheckboxProps } from "./Checkbox.types";

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox.web";
+export type { CheckboxProps } from "./Checkbox.types";

package/src/components/Checkbox/useCheckbox.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useCheckbox } from "./useCheckbox";
+
+describe("useCheckbox", () => {
+  it("defaults to unchecked", () => {
+    const { result } = renderHook(() => useCheckbox({}));
+    expect(result.current.checked).toBe(false);
+  });
+
+  it("uses defaultChecked", () => {
+    const { result } = renderHook(() =>
+      useCheckbox({ defaultChecked: true }),
+    );
+    expect(result.current.checked).toBe(true);
+  });
+
+  it("toggles from unchecked to checked", () => {
+    const { result } = renderHook(() => useCheckbox({}));
+    act(() => result.current.toggle());
+    expect(result.current.checked).toBe(true);
+  });
+
+  it("toggles from checked to unchecked", () => {
+    const { result } = renderHook(() =>
+      useCheckbox({ defaultChecked: true }),
+    );
+    act(() => result.current.toggle());
+    expect(result.current.checked).toBe(false);
+  });
+
+  it("calls onCheckedChange on toggle", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useCheckbox({ onCheckedChange: onChange }),
+    );
+    act(() => result.current.toggle());
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not toggle when disabled", () => {
+    const { result } = renderHook(() =>
+      useCheckbox({ disabled: true }),
+    );
+    act(() => result.current.toggle());
+    expect(result.current.checked).toBe(false);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useCheckbox({ checked: false, onCheckedChange: onChange }),
+    );
+
+    act(() => result.current.toggle());
+    expect(result.current.checked).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("exposes disabled state", () => {
+    const { result } = renderHook(() =>
+      useCheckbox({ disabled: true }),
+    );
+    expect(result.current.disabled).toBe(true);
+  });
+});

package/src/components/Checkbox/useCheckbox.ts

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseCheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+interface UseCheckboxReturn {
+  checked: boolean;
+  disabled: boolean;
+  toggle: () => void;
+}
+
+export function useCheckbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+}: UseCheckboxProps): UseCheckboxReturn {
+  const [checked, setChecked] = useControllableState({
+    value: controlledChecked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    setChecked((prev) => !prev);
+  }, [disabled, setChecked]);
+
+  return { checked, disabled, toggle };
+}
+
+export type { UseCheckboxProps, UseCheckboxReturn };

package/src/components/Collapsible/Collapsible.native.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContext } from "react";
+import {
+  View,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  type ViewProps,
+  type PressableProps,
+} from "react-native";
+import type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+} from "./Collapsible.types";
+import { useCollapsible } from "./useCollapsible";
+
+if (
+  Platform.OS === "android" &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface CollapsibleContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  disabled: boolean;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue>({
+  open: false,
+  onOpenChange: () => {},
+  disabled: false,
+});
+
+interface CollapsibleNativeProps extends CollapsibleProps, ViewProps {}
+
+function Collapsible({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  disabled: disabledProp,
+  children,
+  ...props
+}: CollapsibleNativeProps) {
+  const { open, disabled, setOpen } = useCollapsible({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange: onOpenChangeProp,
+    disabled: disabledProp,
+  });
+
+  const handleOpenChange = (next: boolean) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setOpen(next);
+  };
+
+  return (
+    <CollapsibleContext.Provider
+      value={{ open, onOpenChange: handleOpenChange, disabled }}
+    >
+      <View {...props}>{children}</View>
+    </CollapsibleContext.Provider>
+  );
+}
+
+interface CollapsibleTriggerNativeProps extends Omit<CollapsibleTriggerProps, "asChild" | "children">, PressableProps {}
+
+function CollapsibleTrigger({
+  children,
+  ...props
+}: CollapsibleTriggerNativeProps) {
+  const { open, onOpenChange, disabled } = useContext(CollapsibleContext);
+
+  return (
+    <Pressable
+      onPress={() => onOpenChange(!open)}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+interface CollapsibleContentNativeProps extends CollapsibleContentProps, ViewProps {}
+
+function CollapsibleContent({
+  children,
+  ...props
+}: CollapsibleContentNativeProps) {
+  const { open } = useContext(CollapsibleContext);
+
+  if (!open) return null;
+
+  return <View {...props}>{children}</View>;
+}
+
+Collapsible.displayName = "Collapsible";
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+CollapsibleContent.displayName = "CollapsibleContent";
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export type {
+  CollapsibleNativeProps,
+  CollapsibleTriggerNativeProps,
+  CollapsibleContentNativeProps,
+};

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./Collapsible.web";
+
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    style: { width: 360 },
+    children: (
+      <>
+        <CollapsibleTrigger asChild>
+          <button>Toggle content</button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          This is the collapsible content. It can contain any elements you want
+          to show or hide.
+        </CollapsibleContent>
+      </>
+    ),
+  },
+};