@byldpartners/ui 0.0.1

package/src/components/Toast/useToast.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { toast, useToast } from "./useToast";
+
+// Reset global toast state between tests
+beforeEach(() => {
+  const { result } = renderHook(() => useToast());
+  act(() => result.current.dismiss());
+});
+
+describe("useToast", () => {
+  it("starts with an empty toast list", () => {
+    const { result } = renderHook(() => useToast());
+    expect(result.current.toasts).toEqual([]);
+  });
+
+  it("adds a toast via the global toast function", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "Hello" });
+    });
+
+    expect(result.current.toasts).toHaveLength(1);
+    expect(result.current.toasts[0].title).toBe("Hello");
+  });
+
+  it("adds multiple toasts in order (newest first)", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "First" });
+      toast({ title: "Second" });
+    });
+
+    expect(result.current.toasts).toHaveLength(2);
+    expect(result.current.toasts[0].title).toBe("Second");
+    expect(result.current.toasts[1].title).toBe("First");
+  });
+
+  it("dismisses a specific toast by id", () => {
+    const { result } = renderHook(() => useToast());
+
+    let toastRef: { id: string; dismiss: () => void };
+    act(() => {
+      toastRef = toast({ title: "To dismiss" });
+      toast({ title: "To keep" });
+    });
+
+    act(() => toastRef.dismiss());
+
+    expect(result.current.toasts).toHaveLength(1);
+    expect(result.current.toasts[0].title).toBe("To keep");
+  });
+
+  it("dismisses a toast by id via the hook", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "A" });
+      toast({ title: "B" });
+    });
+
+    const idToDismiss = result.current.toasts[0].id;
+    act(() => result.current.dismiss(idToDismiss));
+
+    expect(result.current.toasts).toHaveLength(1);
+  });
+
+  it("dismisses all toasts when no id is provided", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "A" });
+      toast({ title: "B" });
+    });
+
+    act(() => result.current.dismiss());
+
+    expect(result.current.toasts).toEqual([]);
+  });
+
+  it("supports variant and description", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({
+        title: "Error",
+        description: "Something went wrong",
+        variant: "destructive",
+      });
+    });
+
+    expect(result.current.toasts[0].variant).toBe("destructive");
+    expect(result.current.toasts[0].description).toBe("Something went wrong");
+  });
+
+  it("generates unique ids for each toast", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "A" });
+      toast({ title: "B" });
+      toast({ title: "C" });
+    });
+
+    const ids = result.current.toasts.map((t) => t.id);
+    expect(new Set(ids).size).toBe(3);
+  });
+
+  it("syncs across multiple hook instances", () => {
+    const { result: hook1 } = renderHook(() => useToast());
+    const { result: hook2 } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ title: "Synced" });
+    });
+
+    expect(hook1.current.toasts).toHaveLength(1);
+    expect(hook2.current.toasts).toHaveLength(1);
+  });
+});

package/src/components/Toast/useToast.ts

@@ -0,0 +1,64 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface ToasterToast {
+  id: string;
+  title?: string;
+  description?: string;
+  variant?: "default" | "destructive";
+  action?: { label: string; onPress: () => void };
+  duration?: number;
+}
+
+// ---- Global toast state ----
+
+let toastCount = 0;
+function genId() {
+  toastCount = (toastCount + 1) % Number.MAX_SAFE_INTEGER;
+  return toastCount.toString();
+}
+
+const toastListeners: Array<(toasts: ToasterToast[]) => void> = [];
+let toastState: ToasterToast[] = [];
+
+function notifyListeners() {
+  toastListeners.forEach((l) => l([...toastState]));
+}
+
+function toast(props: Omit<ToasterToast, "id">) {
+  const id = genId();
+  const newToast: ToasterToast = { ...props, id };
+  toastState = [newToast, ...toastState];
+  notifyListeners();
+  return {
+    id,
+    dismiss: () => {
+      toastState = toastState.filter((t) => t.id !== id);
+      notifyListeners();
+    },
+  };
+}
+
+function useToast() {
+  const [toasts, setToasts] = useState<ToasterToast[]>(toastState);
+
+  useEffect(() => {
+    toastListeners.push(setToasts);
+    return () => {
+      const idx = toastListeners.indexOf(setToasts);
+      if (idx > -1) toastListeners.splice(idx, 1);
+    };
+  }, []);
+
+  const dismiss = useCallback((id?: string) => {
+    if (id) {
+      toastState = toastState.filter((t) => t.id !== id);
+    } else {
+      toastState = [];
+    }
+    notifyListeners();
+  }, []);
+
+  return { toasts, toast, dismiss };
+}
+
+export { toast, useToast };

package/src/components/Toggle/Toggle.native.tsx

@@ -0,0 +1,70 @@
+import { Pressable, type PressableProps } from "react-native";
+import { cva } from "class-variance-authority";
+import type { ToggleVariant, ToggleSize, ToggleProps } from "./Toggle.types";
+import { useToggle } from "./useToggle";
+import { cn } from "../../utils/cn";
+
+interface ToggleNativeProps extends ToggleProps, Omit<PressableProps, "children" | "disabled"> {}
+
+const toggleVariants = cva(
+  "flex-row items-center justify-center rounded-md gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input shadow-sm elevation-1",
+      } satisfies Record<ToggleVariant, string>,
+      size: {
+        default: "h-9 px-2 min-w-[36px]",
+        sm: "h-8 px-1.5 min-w-[32px]",
+        lg: "h-10 px-2.5 min-w-[40px]",
+      } satisfies Record<ToggleSize, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  pressed: controlledPressed,
+  defaultPressed,
+  onPressedChange,
+  variant = "default",
+  size = "default",
+  disabled: disabledProp,
+  children,
+  className,
+  ...props
+}: ToggleNativeProps) {
+  const { pressed, disabled, toggle } = useToggle({
+    pressed: controlledPressed,
+    defaultPressed,
+    onPressedChange,
+    disabled: disabledProp,
+  });
+
+  return (
+    <Pressable
+      onPress={toggle}
+      disabled={disabled}
+      className={cn(
+        toggleVariants({ variant, size }),
+        pressed ? "bg-secondary" : "bg-transparent",
+        disabled && "opacity-50",
+        className,
+      )}
+      accessibilityRole="button"
+      accessibilityState={{ selected: pressed }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+Toggle.displayName = "Toggle";
+
+export { Toggle, toggleVariants };
+export type { ToggleNativeProps };

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Toggle } from "./Toggle.web";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Components/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    children: "Bold",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Bold",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Bold",
+  },
+};

package/src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,13 @@
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "default" | "sm" | "lg";
+
+export interface ToggleProps {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Toggle/Toggle.web.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type { ToggleVariant, ToggleSize } from "./Toggle.types";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      } satisfies Record<ToggleVariant, string>,
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      } satisfies Record<ToggleSize, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = forwardRef<
+  React.ComponentRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,2 @@
+export { Toggle, toggleVariants } from "./Toggle.native";
+export type { ToggleProps, ToggleVariant, ToggleSize } from "./Toggle.types";

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/useToggle.test.ts

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

package/src/components/Toggle/useToggle.ts

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseToggleProps {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+}
+
+interface UseToggleReturn {
+  pressed: boolean;
+  disabled: boolean;
+  toggle: () => void;
+}
+
+export function useToggle({
+  pressed: controlledPressed,
+  defaultPressed = false,
+  onPressedChange,
+  disabled = false,
+}: UseToggleProps): UseToggleReturn {
+  const [pressed, setPressed] = useControllableState({
+    value: controlledPressed,
+    defaultValue: defaultPressed,
+    onChange: onPressedChange,
+  });
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    setPressed((prev) => !prev);
+  }, [disabled, setPressed]);
+
+  return { pressed, disabled, toggle };
+}
+
+export type { UseToggleProps, UseToggleReturn };

package/src/components/ToggleGroup/ToggleGroup.native.tsx

@@ -0,0 +1,103 @@
+import { createContext, useContext } from "react";
+import { View, Pressable, type ViewProps } from "react-native";
+import type { ToggleVariant, ToggleSize } from "../Toggle/Toggle.types";
+import { cn } from "../../utils/cn";
+import { toggleVariants } from "../Toggle/Toggle.native";
+import type { ToggleGroupProps, ToggleGroupItemProps } from "./ToggleGroup.types";
+import { useToggleGroup } from "./useToggleGroup";
+
+interface ToggleGroupContextValue {
+  type: "single" | "multiple";
+  value: string[];
+  onItemPress: (value: string) => void;
+  variant: ToggleVariant;
+  size: ToggleSize;
+  disabled: boolean;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>({
+  type: "single",
+  value: [],
+  onItemPress: () => {},
+  variant: "default",
+  size: "default",
+  disabled: false,
+});
+
+type ToggleGroupNativeProps = ToggleGroupProps & Omit<ViewProps, "className">;
+
+function ToggleGroup({
+  type,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  variant = "default",
+  size = "default",
+  disabled: disabledProp,
+  children,
+  className,
+  ...props
+}: ToggleGroupNativeProps) {
+  const { type: resolvedType, value, disabled, onItemPress } = useToggleGroup({
+    type,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    disabled: disabledProp,
+  });
+
+  return (
+    <ToggleGroupContext.Provider
+      value={{ type: resolvedType, value, onItemPress, variant, size, disabled }}
+    >
+      <View
+        className={cn("flex-row items-center gap-1", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </ToggleGroupContext.Provider>
+  );
+}
+
+type ToggleGroupItemNativeProps = ToggleGroupItemProps & Omit<ViewProps, "children" | "className">;
+
+function ToggleGroupItem({
+  value,
+  variant: itemVariant,
+  size: itemSize,
+  disabled: itemDisabled,
+  children,
+  className,
+  ...props
+}: ToggleGroupItemNativeProps) {
+  const ctx = useContext(ToggleGroupContext);
+  const isPressed = ctx.value.includes(value);
+  const isDisabled = ctx.disabled || itemDisabled || false;
+  const activeVariant = itemVariant || ctx.variant;
+  const activeSize = itemSize || ctx.size;
+
+  return (
+    <Pressable
+      onPress={() => !isDisabled && ctx.onItemPress(value)}
+      disabled={isDisabled}
+      className={cn(
+        toggleVariants({ variant: activeVariant, size: activeSize }),
+        isPressed ? "bg-secondary" : "bg-transparent",
+        isDisabled && "opacity-50",
+        className,
+      )}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isPressed }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+ToggleGroup.displayName = "ToggleGroup";
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupNativeProps, ToggleGroupItemNativeProps };

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.web";
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: "Components/ToggleGroup",
+  component: ToggleGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+      <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+      <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};

package/src/components/ToggleGroup/ToggleGroup.types.ts

@@ -0,0 +1,22 @@
+import type { ToggleVariant, ToggleSize } from "../Toggle/Toggle.types";
+
+export interface ToggleGroupProps {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface ToggleGroupItemProps {
+  value: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/ToggleGroup/ToggleGroup.web.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, createContext, useContext } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import { toggleVariants } from "../Toggle/Toggle.web";
+
+const ToggleGroupContext = createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: variant || context.variant,
+          size: size || context.size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,2 @@
+export { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.native";
+export type { ToggleGroupProps, ToggleGroupItemProps } from "./ToggleGroup.types";

package/src/components/ToggleGroup/index.ts

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