@byldpartners/ui 0.0.1

package/src/components/Breadcrumb/Breadcrumb.native.tsx

@@ -0,0 +1,158 @@
+import {
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+  type TextProps,
+} from "react-native";
+import { cn } from "../../utils/cn";
+import type {
+  BreadcrumbProps,
+  BreadcrumbListProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbPageProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
+} from "./Breadcrumb.types";
+
+// --- Breadcrumb ---
+
+interface BreadcrumbNativeProps extends BreadcrumbProps, ViewProps {}
+
+function Breadcrumb({ children, className, ...props }: BreadcrumbNativeProps) {
+  return (
+    <View
+      accessibilityRole="header"
+      className={cn("flex-row", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+Breadcrumb.displayName = "Breadcrumb";
+
+// --- BreadcrumbList ---
+
+interface BreadcrumbListNativeProps extends BreadcrumbListProps, ViewProps {}
+
+function BreadcrumbList({
+  children,
+  className,
+  ...props
+}: BreadcrumbListNativeProps) {
+  return (
+    <View
+      className={cn("flex-row flex-wrap items-center gap-1.5", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+BreadcrumbList.displayName = "BreadcrumbList";
+
+// --- BreadcrumbItem ---
+
+interface BreadcrumbItemNativeProps extends BreadcrumbItemProps, ViewProps {}
+
+function BreadcrumbItem({
+  children,
+  className,
+  ...props
+}: BreadcrumbItemNativeProps) {
+  return (
+    <View
+      className={cn("flex-row items-center gap-1.5", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// --- BreadcrumbLink ---
+
+interface BreadcrumbLinkNativeProps extends BreadcrumbLinkProps {}
+
+function BreadcrumbLink({
+  children,
+  onPress,
+}: BreadcrumbLinkNativeProps) {
+  return (
+    <Pressable onPress={onPress}>
+      {typeof children === "string" ? (
+        <Text className="text-sm text-muted-foreground">
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+// --- BreadcrumbPage ---
+
+interface BreadcrumbPageNativeProps extends BreadcrumbPageProps, TextProps {}
+
+function BreadcrumbPage({
+  children,
+  className,
+  ...props
+}: BreadcrumbPageNativeProps) {
+  return (
+    <Text
+      className={cn("text-sm font-normal text-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+// --- BreadcrumbSeparator ---
+
+interface BreadcrumbSeparatorNativeProps extends BreadcrumbSeparatorProps {}
+
+function BreadcrumbSeparator({ children }: BreadcrumbSeparatorNativeProps) {
+  return (
+    <Text className="text-sm text-muted-foreground">
+      {children ?? "/"}
+    </Text>
+  );
+}
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+// --- BreadcrumbEllipsis ---
+
+function BreadcrumbEllipsis(_props: BreadcrumbEllipsisProps) {
+  return (
+    <View className="h-9 w-9 items-center justify-center">
+      <Text className="text-sm text-muted-foreground">{"\u2026"}</Text>
+    </View>
+  );
+}
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
+export type {
+  BreadcrumbNativeProps,
+  BreadcrumbListNativeProps,
+  BreadcrumbItemNativeProps,
+  BreadcrumbLinkNativeProps,
+  BreadcrumbPageNativeProps,
+  BreadcrumbSeparatorNativeProps,
+};

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./Breadcrumb.web";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    ),
+  },
+};

package/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,37 @@
+export interface BreadcrumbProps {
+  separator?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbListProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbItemProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbLinkProps {
+  href?: string;
+  asChild?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  onPress?: () => void;
+}
+
+export interface BreadcrumbPageProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbSeparatorProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface BreadcrumbEllipsisProps {
+  className?: string;
+}

package/src/components/Breadcrumb/Breadcrumb.web.tsx

@@ -0,0 +1,125 @@
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn";
+
+function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="m9 18 6-6-6-6"/>
+    </svg>
+  );
+}
+
+function MoreHorizontalIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
+    </svg>
+  );
+}
+
+const Breadcrumb = forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,18 @@
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./Breadcrumb.native";
+export type {
+  BreadcrumbProps,
+  BreadcrumbListProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbPageProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
+} from "./Breadcrumb.types";

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,18 @@
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./Breadcrumb.web";
+export type {
+  BreadcrumbProps,
+  BreadcrumbListProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbPageProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
+} from "./Breadcrumb.types";

package/src/components/Button/Button.native.tsx

@@ -0,0 +1,118 @@
+import { Pressable, Text, type PressableProps } from "react-native";
+import { cva } from "class-variance-authority";
+import type { ButtonVariant, ButtonSize, ButtonProps } from "./Button.types";
+import { cn } from "../../utils/cn";
+import { GLASS_TEXT_DEFAULT, type GlassProps } from "../../utils/glass.native";
+import { GlassWrapper, useGlassActive } from "../../utils/withGlass.native";
+import { useTheme, remToNumber } from "../../theme/native";
+
+interface ButtonNativeProps extends ButtonProps, GlassProps, Omit<PressableProps, "children" | "disabled" | "onPress"> {}
+
+const BUTTON_BASE = "flex-row items-center justify-center rounded-md gap-2";
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 px-3",
+  lg: "h-10 px-8",
+  icon: "h-9 w-9",
+};
+
+const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+  default: "bg-primary shadow elevation-1",
+  destructive: "bg-destructive shadow-sm elevation-1",
+  outline: "bg-transparent border border-input shadow-sm elevation-1",
+  secondary: "bg-secondary shadow-sm elevation-1",
+  ghost: "bg-transparent",
+  link: "bg-transparent",
+};
+
+const buttonContainerVariants = cva(BUTTON_BASE, {
+  variants: {
+    variant: VARIANT_CLASSES satisfies Record<ButtonVariant, string>,
+    size: SIZE_CLASSES satisfies Record<ButtonSize, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const buttonTextVariants = cva("font-medium leading-tight", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground",
+      secondary: "text-secondary-foreground",
+      ghost: "text-foreground",
+      link: "text-foreground underline",
+    } satisfies Record<ButtonVariant, string>,
+    size: {
+      default: "text-sm",
+      sm: "text-xs",
+      lg: "text-sm",
+      icon: "text-sm",
+    } satisfies Record<ButtonSize, string>,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+function ButtonContent({
+  variant = "default",
+  size = "default",
+  disabled,
+  children,
+  onPress,
+  className,
+  glassTextColor = GLASS_TEXT_DEFAULT,
+  ...props
+}: Omit<ButtonNativeProps, "glass" | "glassEffect">) {
+  const glassActive = useGlassActive();
+
+  const containerClassName = glassActive
+    ? cn(BUTTON_BASE, SIZE_CLASSES[size], disabled && "opacity-50", className)
+    : cn(buttonContainerVariants({ variant, size }), disabled && "opacity-50", className);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      className={containerClassName}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text className={cn(
+          buttonTextVariants({ size }),
+          glassActive ? glassTextColor : buttonTextVariants({ variant }),
+        )}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+function Button({
+  glass,
+  glassEffect,
+  glassTextColor,
+  ...props
+}: ButtonNativeProps) {
+  const { tokens, glass: themeGlass } = useTheme();
+
+  return (
+    <GlassWrapper enabled={glass ?? themeGlass} effect={glassEffect} style={{ borderRadius: remToNumber(tokens.radius.md) }}>
+      <ButtonContent glassTextColor={glassTextColor} {...props} />
+    </GlassWrapper>
+  );
+}
+
+Button.displayName = "Button";
+
+export { Button, buttonContainerVariants, buttonTextVariants };
+export type { ButtonNativeProps };

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "./Button.web";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "default",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Destructive",
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Outline",
+    variant: "outline",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: "Ghost",
+    variant: "ghost",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: "Link",
+    variant: "link",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: "Small",
+    size: "sm",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: "Large",
+    size: "lg",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    children: "+",
+    size: "icon",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled",
+    disabled: true,
+  },
+};

package/src/components/Button/Button.types.ts

@@ -0,0 +1,19 @@
+export type ButtonVariant =
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "link";
+
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  className?: string;
+  asChild?: boolean;
+}

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

@@ -0,0 +1,69 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Button, buttonVariants } from "./Button.web";
+
+describe("Button", () => {
+  it("renders with children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeDefined();
+  });
+
+  it("merges custom className", () => {
+    render(<Button className="custom-class">btn</Button>);
+    expect(screen.getByRole("button").className).toContain("custom-class");
+  });
+
+  it("applies default variant classes", () => {
+    render(<Button>btn</Button>);
+    const el = screen.getByRole("button");
+    expect(el.className).toContain("bg-primary");
+  });
+
+  it("applies destructive variant", () => {
+    render(<Button variant="destructive">btn</Button>);
+    expect(screen.getByRole("button").className).toContain("bg-destructive");
+  });
+
+  it("applies outline variant", () => {
+    render(<Button variant="outline">btn</Button>);
+    expect(screen.getByRole("button").className).toContain("border");
+  });
+
+  it("applies size variants", () => {
+    render(<Button size="sm">btn</Button>);
+    expect(screen.getByRole("button").className).toContain("h-8");
+  });
+
+  it("applies icon size", () => {
+    render(<Button size="icon">btn</Button>);
+    expect(screen.getByRole("button").className).toContain("w-9");
+  });
+
+  it("forwards disabled prop", () => {
+    render(<Button disabled>btn</Button>);
+    expect(screen.getByRole("button")).toHaveProperty("disabled", true);
+  });
+
+  it("renders as child element when asChild", () => {
+    render(
+      <Button asChild>
+        <a href="/test">link</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "link" });
+    expect(link.tagName).toBe("A");
+    expect(link.className).toContain("bg-primary");
+  });
+
+  it("forwards ref", () => {
+    let ref: HTMLButtonElement | null = null;
+    render(<Button ref={(el) => { ref = el; }}>btn</Button>);
+    expect(ref).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("buttonVariants generates correct classes", () => {
+    const classes = buttonVariants({ variant: "ghost", size: "lg" });
+    expect(classes).toContain("hover:bg-accent");
+    expect(classes).toContain("h-10");
+  });
+});