@byldpartners/ui 0.0.1

package/src/components/ToggleGroup/useToggleGroup.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useToggleGroup } from "./useToggleGroup";
+
+describe("useToggleGroup", () => {
+  describe("single type", () => {
+    it("starts with empty value", () => {
+      const { result } = renderHook(() => useToggleGroup({}));
+      expect(result.current.value).toEqual([]);
+    });
+
+    it("selects an item", () => {
+      const { result } = renderHook(() => useToggleGroup({}));
+      act(() => result.current.onItemPress("a"));
+      expect(result.current.value).toEqual(["a"]);
+    });
+
+    it("deselects an already-selected item", () => {
+      const { result } = renderHook(() =>
+        useToggleGroup({ defaultValue: "a" }),
+      );
+      act(() => result.current.onItemPress("a"));
+      expect(result.current.value).toEqual([]);
+    });
+
+    it("replaces selection when pressing a different item", () => {
+      const { result } = renderHook(() =>
+        useToggleGroup({ defaultValue: "a" }),
+      );
+      act(() => result.current.onItemPress("b"));
+      expect(result.current.value).toEqual(["b"]);
+    });
+
+    it("calls onValueChange with string for single type", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useToggleGroup({ onValueChange: onChange }),
+      );
+      act(() => result.current.onItemPress("a"));
+      expect(onChange).toHaveBeenCalledWith("a");
+    });
+  });
+
+  describe("multiple type", () => {
+    it("adds items to selection", () => {
+      const { result } = renderHook(() =>
+        useToggleGroup({ type: "multiple" }),
+      );
+      act(() => result.current.onItemPress("a"));
+      act(() => result.current.onItemPress("b"));
+      expect(result.current.value).toEqual(["a", "b"]);
+    });
+
+    it("removes an item from selection", () => {
+      const { result } = renderHook(() =>
+        useToggleGroup({ type: "multiple", defaultValue: ["a", "b"] }),
+      );
+      act(() => result.current.onItemPress("a"));
+      expect(result.current.value).toEqual(["b"]);
+    });
+
+    it("calls onValueChange with array for multiple type", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useToggleGroup({ type: "multiple", onValueChange: onChange }),
+      );
+      act(() => result.current.onItemPress("a"));
+      expect(onChange).toHaveBeenCalledWith(["a"]);
+    });
+  });
+
+  it("does not change value when disabled", () => {
+    const { result } = renderHook(() =>
+      useToggleGroup({ disabled: true }),
+    );
+    act(() => result.current.onItemPress("a"));
+    expect(result.current.value).toEqual([]);
+  });
+});

package/src/components/ToggleGroup/useToggleGroup.ts

@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseToggleGroupProps {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  disabled?: boolean;
+}
+
+interface UseToggleGroupReturn {
+  type: "single" | "multiple";
+  value: string[];
+  disabled: boolean;
+  onItemPress: (itemValue: string) => void;
+}
+
+function normalizeValue(v: string | string[] | undefined): string[] {
+  if (v === undefined) return [];
+  return Array.isArray(v) ? v : [v];
+}
+
+export function useToggleGroup({
+  type = "single",
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+}: UseToggleGroupProps): UseToggleGroupReturn {
+  const controlledNormalized = useMemo(
+    () => (controlledValue !== undefined ? normalizeValue(controlledValue) : undefined),
+    [controlledValue],
+  );
+
+  const [value, setValue] = useControllableState<string[]>({
+    value: controlledNormalized,
+    defaultValue: normalizeValue(defaultValue),
+    onChange: (next) => {
+      onValueChange?.(type === "single" ? (next[0] || "") : next);
+    },
+  });
+
+  const onItemPress = useCallback(
+    (itemValue: string) => {
+      if (disabled) return;
+      if (type === "single") {
+        setValue(value.includes(itemValue) ? [] : [itemValue]);
+      } else {
+        setValue(
+          value.includes(itemValue)
+            ? value.filter((v) => v !== itemValue)
+            : [...value, itemValue],
+        );
+      }
+    },
+    [disabled, type, value, setValue],
+  );
+
+  return { type, value, disabled, onItemPress };
+}
+
+export type { UseToggleGroupProps, UseToggleGroupReturn };

package/src/components/Tooltip/Tooltip.native.tsx

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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "./Tooltip.web";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button">Hover me</button>
+        </TooltipTrigger>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+};

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+export interface TooltipProps {
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delayDuration?: number;
+}
+
+export interface TooltipTriggerProps {
+  children?: ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface TooltipContentProps {
+  children?: ReactNode;
+  className?: string;
+  sideOffset?: number;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export interface TooltipProviderProps {
+  children?: ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+}

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

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "./Tooltip.web";
+
+describe("Tooltip", () => {
+  it("renders trigger", () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(screen.getByText("Hover me")).toBeDefined();
+  });
+
+  it("content is hidden by default", () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(screen.queryByText("Tip")).toBeNull();
+  });
+
+  it("shows content when open", () => {
+    render(
+      <TooltipProvider>
+        <Tooltip open>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tip</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    // Radix renders tooltip text twice (visible + sr-only), so use getAllByText
+    expect(screen.getAllByText("Tip").length).toBeGreaterThan(0);
+  });
+});

package/src/components/Tooltip/Tooltip.web.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

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

package/src/components/Tooltip/index.ts

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

package/src/components/index.native.ts

@@ -0,0 +1,50 @@
+export * from "./Accordion/index.native";
+export * from "./Alert/index.native";
+export * from "./AlertDialog/index.native";
+export * from "./AspectRatio/index.native";
+export * from "./Avatar/index.native";
+export * from "./Badge/index.native";
+export * from "./Breadcrumb/index.native";
+export * from "./Button/index.native";
+export * from "./Calendar/index.native";
+export * from "./Card/index.native";
+export * from "./Carousel/index.native";
+export * from "./Chart/index.native";
+export * from "./Checkbox/index.native";
+export * from "./Collapsible/index.native";
+export * from "./Combobox/index.native";
+export * from "./Command/index.native";
+export * from "./ContextMenu/index.native";
+export * from "./DataTable/index.native";
+export * from "./DatePicker/index.native";
+export * from "./Dialog/index.native";
+export * from "./Drawer/index.native";
+export * from "./DropdownMenu/index.native";
+export * from "./Form/index.native";
+export * from "./HoverCard/index.native";
+export * from "./Icon/index.native";
+export * from "./Input/index.native";
+export * from "./InputOTP/index.native";
+export * from "./Label/index.native";
+export * from "./Menubar/index.native";
+export * from "./NavigationMenu/index.native";
+export * from "./Pagination/index.native";
+export * from "./Popover/index.native";
+export * from "./Progress/index.native";
+export * from "./RadioGroup/index.native";
+export * from "./ResizablePanel/index.native";
+export * from "./ScrollArea/index.native";
+export * from "./Select/index.native";
+export * from "./Separator/index.native";
+export * from "./Sheet/index.native";
+export * from "./Sidebar/index.native";
+export * from "./Skeleton/index.native";
+export * from "./Slider/index.native";
+export * from "./Switch/index.native";
+export * from "./Table/index.native";
+export * from "./Tabs/index.native";
+export * from "./Textarea/index.native";
+export * from "./Toast/index.native";
+export * from "./Toggle/index.native";
+export * from "./ToggleGroup/index.native";
+export * from "./Tooltip/index.native";

package/src/components/index.ts

@@ -0,0 +1,49 @@
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./AlertDialog";
+export * from "./AspectRatio";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Breadcrumb";
+export * from "./Button";
+export * from "./Calendar";
+export * from "./Card";
+export * from "./Carousel";
+export * from "./Chart";
+export * from "./Checkbox";
+export * from "./Collapsible";
+export * from "./Combobox";
+export * from "./Command";
+export * from "./ContextMenu";
+export * from "./DataTable";
+export * from "./DatePicker";
+export * from "./Dialog";
+export * from "./Drawer";
+export * from "./DropdownMenu";
+export * from "./Form";
+export * from "./HoverCard";
+export * from "./Input";
+export * from "./InputOTP";
+export * from "./Label";
+export * from "./Menubar";
+export * from "./NavigationMenu";
+export * from "./Pagination";
+export * from "./Popover";
+export * from "./Progress";
+export * from "./RadioGroup";
+export * from "./ResizablePanel";
+export * from "./ScrollArea";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Sheet";
+export * from "./Sidebar";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./Table";
+export * from "./Tabs";
+export * from "./Textarea";
+export * from "./Toast";
+export * from "./Toggle";
+export * from "./ToggleGroup";
+export * from "./Tooltip";

package/src/hooks/useControllableState.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useControllableState } from "./useControllableState";
+
+describe("useControllableState", () => {
+  it("uses defaultValue when uncontrolled", () => {
+    const { result } = renderHook(() =>
+      useControllableState({ defaultValue: "hello" }),
+    );
+    expect(result.current[0]).toBe("hello");
+  });
+
+  it("updates internal state when uncontrolled", () => {
+    const { result } = renderHook(() =>
+      useControllableState({ defaultValue: 0 }),
+    );
+
+    act(() => result.current[1](5));
+    expect(result.current[0]).toBe(5);
+  });
+
+  it("accepts a function updater when uncontrolled", () => {
+    const { result } = renderHook(() =>
+      useControllableState({ defaultValue: 10 }),
+    );
+
+    act(() => result.current[1]((prev) => prev + 1));
+    expect(result.current[0]).toBe(11);
+  });
+
+  it("uses controlled value when provided", () => {
+    const { result } = renderHook(() =>
+      useControllableState({ value: "controlled", defaultValue: "default" }),
+    );
+    expect(result.current[0]).toBe("controlled");
+  });
+
+  it("does not update internal state when controlled", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useControllableState({
+        value: "controlled",
+        defaultValue: "default",
+        onChange,
+      }),
+    );
+
+    act(() => result.current[1]("new-value"));
+    // Value stays controlled
+    expect(result.current[0]).toBe("controlled");
+    // But onChange is called
+    expect(onChange).toHaveBeenCalledWith("new-value");
+  });
+
+  it("calls onChange for both controlled and uncontrolled", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useControllableState({ defaultValue: "start", onChange }),
+    );
+
+    act(() => result.current[1]("next"));
+    expect(onChange).toHaveBeenCalledWith("next");
+    expect(result.current[0]).toBe("next");
+  });
+
+  it("reflects updated controlled value on re-render", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useControllableState({ value, defaultValue: "default" }),
+      { initialProps: { value: "a" as string | undefined } },
+    );
+
+    expect(result.current[0]).toBe("a");
+    rerender({ value: "b" });
+    expect(result.current[0]).toBe("b");
+  });
+
+  it("transitions from uncontrolled to controlled", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useControllableState({ value, defaultValue: "default" }),
+      { initialProps: { value: undefined as string | undefined } },
+    );
+
+    expect(result.current[0]).toBe("default");
+    rerender({ value: "now-controlled" });
+    expect(result.current[0]).toBe("now-controlled");
+  });
+});

package/src/hooks/useControllableState.ts

@@ -0,0 +1,37 @@
+import { useState, useCallback, useRef } from "react";
+
+interface UseControllableStateProps<T> {
+  value?: T;
+  defaultValue: T;
+  onChange?: (value: T) => void;
+}
+
+export function useControllableState<T>({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+}: UseControllableStateProps<T>): [T, (value: T | ((prev: T) => T)) => void] {
+  const [uncontrolledValue, setUncontrolledValue] = useState<T>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const setValue = useCallback(
+    (next: T | ((prev: T) => T)) => {
+      const nextValue =
+        typeof next === "function"
+          ? (next as (prev: T) => T)(value)
+          : next;
+
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled, value],
+  );
+
+  return [value, setValue];
+}

package/src/index.native.ts

@@ -0,0 +1,20 @@
+// Components
+export * from "./components/index.native";
+
+// Theme
+export { ThemeProvider, useTheme, useGlass, themes, createNativeTheme, defaultPreset, darkPreset, auroraPreset } from "./theme/native";
+export type {
+  ThemePreset,
+  ThemeTokens,
+} from "./theme/theme.types";
+export type {
+  NativeTheme,
+  NativeThemeRadius,
+  NativeThemeSpacing,
+} from "./theme/native";
+
+// Glass utilities
+export { GlassWrapper, useGlassActive } from "./utils/withGlass.native";
+export { isGlassSupported } from "./utils/glass.native";
+export type { GlassProps } from "./utils/glass.native";
+export type { GlassWrapperProps } from "./utils/withGlass.native";

package/src/index.ts

@@ -0,0 +1,12 @@
+// Components
+export * from "./components";
+
+// Theme
+export { ThemeProvider, useTheme, defaultPreset, darkPreset, auroraPreset } from "./theme/web";
+export type {
+  ThemePreset,
+  ThemeTokens,
+  ThemeColors,
+  ThemeRadius,
+  ThemeSpacing,
+} from "./theme/theme.types";