@byldpartners/ui 0.0.1

package/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,19 @@
+export interface CollapsibleProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CollapsibleTriggerProps {
+  children?: React.ReactNode;
+  className?: string;
+  asChild?: boolean;
+}
+
+export interface CollapsibleContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Collapsible/Collapsible.web.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -0,0 +1,2 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./Collapsible.native";
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from "./Collapsible.types";

package/src/components/Collapsible/index.ts

@@ -0,0 +1,2 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./Collapsible.web";
+export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from "./Collapsible.types";

package/src/components/Collapsible/useCollapsible.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useCollapsible } from "./useCollapsible";
+
+describe("useCollapsible", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => useCollapsible({}));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("uses defaultOpen", () => {
+    const { result } = renderHook(() => useCollapsible({ defaultOpen: true }));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("toggles open state", () => {
+    const { result } = renderHook(() => useCollapsible({}));
+    act(() => result.current.toggle());
+    expect(result.current.open).toBe(true);
+    act(() => result.current.toggle());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("sets open state directly", () => {
+    const { result } = renderHook(() => useCollapsible({}));
+    act(() => result.current.setOpen(true));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("calls onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useCollapsible({ onOpenChange: onChange }),
+    );
+    act(() => result.current.toggle());
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not toggle when disabled", () => {
+    const { result } = renderHook(() =>
+      useCollapsible({ disabled: true }),
+    );
+    act(() => result.current.toggle());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("exposes disabled state", () => {
+    const { result } = renderHook(() =>
+      useCollapsible({ disabled: true }),
+    );
+    expect(result.current.disabled).toBe(true);
+  });
+});

package/src/components/Collapsible/useCollapsible.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseCollapsibleProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+}
+
+interface UseCollapsibleReturn {
+  open: boolean;
+  disabled: boolean;
+  setOpen: (open: boolean) => void;
+  toggle: () => void;
+}
+
+export function useCollapsible({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+}: UseCollapsibleProps): UseCollapsibleReturn {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    setOpen((prev) => !prev);
+  }, [disabled, setOpen]);
+
+  return { open, disabled, setOpen, toggle };
+}
+
+export type { UseCollapsibleProps, UseCollapsibleReturn };

package/src/components/Combobox/Combobox.native.tsx

@@ -0,0 +1,146 @@
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  FlatList,
+  Modal,
+  TouchableWithoutFeedback,
+  type ViewProps,
+} from "react-native";
+import { ChevronDown, Search, Check } from "lucide-react-native";
+import type { ComboboxOption, ComboboxProps } from "./Combobox.types";
+import { useCombobox } from "./useCombobox";
+import { Icon } from "../Icon/Icon.native";
+import { cn } from "../../utils/cn";
+
+interface ComboboxNativeProps extends ComboboxProps, ViewProps {}
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  disabled = false,
+  ...props
+}: ComboboxNativeProps) {
+  const {
+    onValueChange: handleSelect,
+    open,
+    setOpen,
+    search,
+    setSearch,
+    filteredItems: filtered,
+  } = useCombobox<ComboboxOption>({
+    items: options,
+    value,
+    onValueChange,
+    filterFn: (item, search) =>
+      item.label.toLowerCase().includes(search.toLowerCase()),
+  });
+
+  const selectedOption = options.find((o) => o.value === value);
+
+  return (
+    <View {...props}>
+      <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 shadow-sm elevation-1",
+          disabled && "opacity-50",
+        )}
+      >
+        <Text
+          className={cn(
+            "text-sm leading-none flex-1",
+            selectedOption ? "text-foreground" : "text-muted-foreground",
+          )}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </Text>
+        <View className="ml-2 opacity-50">
+          <Icon icon={ChevronDown} size={16} className="text-muted-foreground" />
+        </View>
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <TouchableWithoutFeedback onPress={() => setOpen(false)}>
+          <View className="flex-1 justify-center items-center bg-black/50">
+            <View
+              onStartShouldSetResponder={() => true}
+              className="bg-popover rounded-lg min-w-[250px] max-h-[400px] shadow-md elevation-3"
+            >
+            <View className="flex-row items-center border-b border-border px-3">
+              <View className="mr-3 opacity-50">
+                <Icon icon={Search} size={16} className="text-muted-foreground" />
+              </View>
+              <TextInput
+                value={search}
+                onChangeText={setSearch}
+                placeholder={searchPlaceholder}
+                placeholderTextColor="#a3a3a3"
+                className="flex-1 h-9 text-sm text-foreground leading-tight"
+                autoFocus
+              />
+            </View>
+            {filtered.length === 0 ? (
+              <View className="p-6 items-center">
+                <Text className="text-sm text-muted-foreground">
+                  {emptyMessage}
+                </Text>
+              </View>
+            ) : (
+              <FlatList
+                data={filtered}
+                keyExtractor={(item: ComboboxOption) => item.value}
+                className="max-h-[300px] p-1"
+                renderItem={({ item }: { item: ComboboxOption }) => {
+                  const isSelected = value === item.value;
+                  return (
+                    <Pressable
+                      onPress={() => handleSelect(item.value)}
+                      className={cn(
+                        "flex-row items-center py-1.5 pl-2 pr-8 rounded-sm",
+                        isSelected ? "bg-accent" : "bg-transparent",
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          "text-sm flex-1",
+                          isSelected
+                            ? "text-accent-foreground"
+                            : "text-foreground",
+                        )}
+                      >
+                        {item.label}
+                      </Text>
+                      {isSelected && (
+                        <View className="absolute right-2">
+                          <Icon icon={Check} size={16} className="text-foreground" />
+                        </View>
+                      )}
+                    </Pressable>
+                  );
+                }}
+              />
+            )}
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+}
+
+Combobox.displayName = "Combobox";
+
+export { Combobox };
+export type { ComboboxNativeProps };

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Combobox } from "./Combobox.web";
+
+const meta: Meta<typeof Combobox> = {
+  title: "Components/Combobox",
+  component: Combobox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Combobox>;
+
+const frameworks = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+  { value: "solid", label: "Solid" },
+];
+
+const ComboboxDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ width: 250 }}>
+      <Combobox
+        options={frameworks}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select a framework..."
+        searchPlaceholder="Search frameworks..."
+        emptyMessage="No framework found."
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <ComboboxDemo />,
+};

package/src/components/Combobox/Combobox.types.ts

@@ -0,0 +1,15 @@
+export interface ComboboxOption {
+  label: string;
+  value: string;
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  className?: string;
+}

package/src/components/Combobox/Combobox.web.tsx

@@ -0,0 +1,145 @@
+import { forwardRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import type { ComboboxProps } from "./Combobox.types";
+
+const Combobox = forwardRef<HTMLDivElement, ComboboxProps & React.HTMLAttributes<HTMLDivElement>>(
+  (
+    {
+      options,
+      value,
+      onValueChange,
+      placeholder = "Select...",
+      searchPlaceholder = "Search...",
+      emptyMessage = "No results found.",
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+
+    const selectedOption = options.find((o) => o.value === value);
+    const filtered = options.filter((o) =>
+      o.label.toLowerCase().includes(search.toLowerCase()),
+    );
+
+    const handleSelect = (val: string) => {
+      onValueChange?.(val === value ? "" : val);
+      setOpen(false);
+      setSearch("");
+    };
+
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild disabled={disabled}>
+          <button
+            type="button"
+            role="combobox"
+            aria-expanded={open}
+            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 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+              className,
+            )}
+          >
+            <span className={cn(!selectedOption && "text-muted-foreground")}>
+              {selectedOption ? selectedOption.label : placeholder}
+            </span>
+            <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="ml-2 h-4 w-4 shrink-0 opacity-50"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            ref={ref}
+            className="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+            align="start"
+            sideOffset={4}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            {...props}
+          >
+            <div className="flex items-center border-b px-3">
+              <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="mr-2 h-4 w-4 shrink-0 opacity-50"
+              >
+                <circle cx="11" cy="11" r="8" />
+                <path d="m21 21-4.3-4.3" />
+              </svg>
+              <input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+              />
+            </div>
+            <div className="max-h-[300px] overflow-y-auto p-1">
+              {filtered.length === 0 ? (
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  {emptyMessage}
+                </div>
+              ) : (
+                filtered.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => handleSelect(option.value)}
+                    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 hover:bg-accent hover:text-accent-foreground",
+                      value === option.value && "bg-accent",
+                    )}
+                  >
+                    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                      {value === option.value && (
+                        <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>
+                      )}
+                    </span>
+                    {option.label}
+                  </button>
+                ))
+              )}
+            </div>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  },
+);
+Combobox.displayName = "Combobox";
+
+export { Combobox };

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

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

package/src/components/Combobox/index.ts

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

package/src/components/Combobox/useCombobox.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useCombobox } from "./useCombobox";
+
+const items = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry" },
+];
+
+describe("useCombobox", () => {
+  it("returns all items when no search", () => {
+    const { result } = renderHook(() =>
+      useCombobox({ items, filterFn: (item, search) => item.label.toLowerCase().includes(search.toLowerCase()) }),
+    );
+    expect(result.current.filteredItems).toEqual(items);
+  });
+
+  it("filters items based on search", () => {
+    const { result } = renderHook(() =>
+      useCombobox({
+        items,
+        filterFn: (item, search) => item.label.toLowerCase().includes(search.toLowerCase()),
+      }),
+    );
+    act(() => result.current.setSearch("ban"));
+    expect(result.current.filteredItems).toEqual([items[1]]);
+  });
+
+  it("starts closed", () => {
+    const { result } = renderHook(() => useCombobox({ items }));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("closes dropdown and clears search on value change", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useCombobox({ items, onValueChange: onChange }),
+    );
+
+    act(() => result.current.setOpen(true));
+    act(() => result.current.setSearch("test"));
+    act(() => result.current.onValueChange("apple"));
+
+    expect(result.current.open).toBe(false);
+    expect(result.current.search).toBe("");
+    expect(onChange).toHaveBeenCalledWith("apple");
+  });
+
+  it("toggles value off when selecting same value", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useCombobox({ items, value: "apple", onValueChange: onChange }),
+    );
+
+    act(() => result.current.onValueChange("apple"));
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+});

package/src/components/Combobox/useCombobox.ts

@@ -0,0 +1,42 @@
+import { useState, useCallback, useMemo } from "react";
+
+interface UseComboboxProps<T> {
+  items: T[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  filterFn?: (item: T, search: string) => boolean;
+}
+
+export function useCombobox<T>({
+  items,
+  value,
+  onValueChange,
+  filterFn,
+}: UseComboboxProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filteredItems = useMemo(() => {
+    if (!search || !filterFn) return items;
+    return items.filter((item) => filterFn(item, search));
+  }, [items, search, filterFn]);
+
+  const handleValueChange = useCallback(
+    (val: string) => {
+      onValueChange?.(val === value ? "" : val);
+      setOpen(false);
+      setSearch("");
+    },
+    [value, onValueChange],
+  );
+
+  return {
+    value,
+    onValueChange: handleValueChange,
+    open,
+    setOpen,
+    search,
+    setSearch,
+    filteredItems,
+  };
+}

package/src/components/Command/Command.native.tsx

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

package/src/components/Command/Command.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "./Command.web";
+
+const meta: Meta<typeof Command> = {
+  title: "Components/Command",
+  component: Command,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Command>;
+
+export const Default: Story = {
+  render: () => (
+    <Command style={{ width: 350, border: "1px solid #e5e7eb", borderRadius: 8 }}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search</CommandItem>
+          <CommandItem>Settings</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};

package/src/components/Command/Command.types.ts

@@ -0,0 +1,43 @@
+/**
+ * Command is a web-heavy component (command palette / cmdk-style).
+ * The native implementation is a placeholder — this component is primarily designed for web.
+ */
+
+export interface CommandProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CommandInputProps {
+  placeholder?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export interface CommandListProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CommandEmptyProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CommandGroupProps {
+  heading?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface CommandItemProps {
+  children?: React.ReactNode;
+  onSelect?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface CommandSeparatorProps {
+  className?: string;
+}