@byldpartners/ui 0.0.1

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

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type { ButtonVariant, ButtonSize, ButtonProps } from "./Button.types";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      } satisfies Record<ButtonVariant, string>,
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      } satisfies Record<ButtonSize, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonWebProps
+  extends ButtonProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const Button = forwardRef<HTMLButtonElement, ButtonWebProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,2 @@
+export { Button, buttonContainerVariants, buttonTextVariants } from "./Button.native";
+export type { ButtonVariant, ButtonSize, ButtonProps } from "./Button.types";

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button.web";
+export type { ButtonVariant, ButtonSize, ButtonProps } from "./Button.types";

package/src/components/Calendar/Calendar.native.tsx

@@ -0,0 +1,108 @@
+import {
+  View,
+  Text,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import type { CalendarProps } from "./Calendar.types";
+import { useCalendar, isSameDay, isToday } from "./useCalendar";
+import { cn } from "../../utils/cn";
+
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+interface CalendarNativeProps extends CalendarProps, ViewProps {}
+
+function Calendar({
+  selected,
+  onSelect,
+  month: controlledMonth,
+  onMonthChange,
+  disabled = false,
+  className,
+  ...props
+}: CalendarNativeProps) {
+  const {
+    year,
+    monthIndex,
+    monthLabel,
+    cells,
+    goToPrevMonth,
+    goToNextMonth,
+    handleDayPress,
+  } = useCalendar({
+    selected,
+    onSelect,
+    month: controlledMonth,
+    onMonthChange,
+    disabled,
+  });
+
+  return (
+    <View className={cn("p-3", className)} {...props}>
+      <View className="flex-row items-center justify-between mb-4">
+        <Pressable
+          onPress={goToPrevMonth}
+          disabled={disabled}
+          className="w-7 h-7 rounded-md border border-border items-center justify-center shadow-sm elevation-1"
+        >
+          <Text className="text-sm text-foreground">&#x2039;</Text>
+        </Pressable>
+        <Text className="text-sm font-medium text-foreground">
+          {monthLabel}
+        </Text>
+        <Pressable
+          onPress={goToNextMonth}
+          disabled={disabled}
+          className="w-7 h-7 rounded-md border border-border items-center justify-center shadow-sm elevation-1"
+        >
+          <Text className="text-sm text-foreground">&#x203A;</Text>
+        </Pressable>
+      </View>
+
+      <View className="flex-row flex-wrap">
+        {DAYS.map((day) => (
+          <View key={day} className="w-8 h-8 items-center justify-center">
+            <Text className="text-xs font-medium text-muted-foreground">{day}</Text>
+          </View>
+        ))}
+
+        {cells.map((day, i) => {
+          if (day === null) {
+            return <View key={`empty-${i}`} className="w-8 h-8" />;
+          }
+          const date = new Date(year, monthIndex, day);
+          const isSelected = selected && isSameDay(date, selected);
+          const isTodayDate = isToday(date);
+
+          return (
+            <Pressable
+              key={day}
+              onPress={() => handleDayPress(day)}
+              disabled={disabled}
+              className={cn(
+                "w-8 h-8 items-center justify-center rounded-md",
+                isTodayDate && !isSelected && "bg-secondary",
+                isSelected && "bg-primary",
+                disabled && "opacity-50",
+              )}
+            >
+              <Text
+                className={cn(
+                  "text-sm",
+                  isSelected ? "text-primary-foreground" : "text-foreground",
+                )}
+              >
+                {day}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+export type { CalendarNativeProps };

package/src/components/Calendar/Calendar.stories.tsx

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

package/src/components/Calendar/Calendar.types.ts

@@ -0,0 +1,8 @@
+export interface CalendarProps {
+  selected?: Date;
+  onSelect?: (date: Date | undefined) => void;
+  month?: Date;
+  onMonthChange?: (month: Date) => void;
+  disabled?: boolean;
+  className?: string;
+}

package/src/components/Calendar/Calendar.web.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils/cn";
+import type { CalendarProps } from "./Calendar.types";
+
+const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function isToday(date: Date): boolean {
+  return isSameDay(date, new Date());
+}
+
+const Calendar = forwardRef<HTMLDivElement, CalendarProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">>(
+  (
+    {
+      selected,
+      onSelect,
+      month: controlledMonth,
+      onMonthChange,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalMonth, setInternalMonth] = useState(
+      controlledMonth || selected || new Date(),
+    );
+    const displayMonth = controlledMonth || internalMonth;
+
+    const year = displayMonth.getFullYear();
+    const monthIndex = displayMonth.getMonth();
+    const daysInMonth = getDaysInMonth(year, monthIndex);
+    const firstDay = getFirstDayOfMonth(year, monthIndex);
+
+    const monthLabel = displayMonth.toLocaleString("default", {
+      month: "long",
+      year: "numeric",
+    });
+
+    const goToPrevMonth = () => {
+      const prev = new Date(year, monthIndex - 1, 1);
+      if (controlledMonth === undefined) setInternalMonth(prev);
+      onMonthChange?.(prev);
+    };
+
+    const goToNextMonth = () => {
+      const next = new Date(year, monthIndex + 1, 1);
+      if (controlledMonth === undefined) setInternalMonth(next);
+      onMonthChange?.(next);
+    };
+
+    const handleDayClick = (day: number) => {
+      if (disabled) return;
+      const date = new Date(year, monthIndex, day);
+      onSelect?.(date);
+    };
+
+    const cells: (number | null)[] = [];
+    for (let i = 0; i < firstDay; i++) {
+      cells.push(null);
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      cells.push(d);
+    }
+
+    return (
+      <div ref={ref} className={cn("p-3", className)} {...props}>
+        <div className="flex items-center justify-between mb-4">
+          <button
+            type="button"
+            onClick={goToPrevMonth}
+            className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent text-sm shadow-sm hover:bg-accent hover:text-accent-foreground"
+            disabled={disabled}
+          >
+            <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"><path d="m15 18-6-6 6-6"/></svg>
+          </button>
+          <div className="text-sm font-medium">{monthLabel}</div>
+          <button
+            type="button"
+            onClick={goToNextMonth}
+            className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-transparent text-sm shadow-sm hover:bg-accent hover:text-accent-foreground"
+            disabled={disabled}
+          >
+            <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"><path d="m9 18 6-6-6-6"/></svg>
+          </button>
+        </div>
+        <div className="grid grid-cols-7 gap-0">
+          {DAYS.map((day) => (
+            <div
+              key={day}
+              className="flex h-8 w-8 items-center justify-center text-[0.8rem] text-muted-foreground font-medium"
+            >
+              {day}
+            </div>
+          ))}
+          {cells.map((day, i) => {
+            if (day === null) {
+              return <div key={`empty-${i}`} className="h-8 w-8" />;
+            }
+            const date = new Date(year, monthIndex, day);
+            const isSelected = selected && isSameDay(date, selected);
+            const isTodayDate = isToday(date);
+
+            return (
+              <button
+                key={day}
+                type="button"
+                onClick={() => handleDayClick(day)}
+                disabled={disabled}
+                className={cn(
+                  "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                  isSelected &&
+                    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+                  isTodayDate && !isSelected && "bg-accent text-accent-foreground",
+                )}
+              >
+                {day}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+Calendar.displayName = "Calendar";
+
+export { Calendar };

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

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

package/src/components/Calendar/index.ts

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

package/src/components/Calendar/useCalendar.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import {
+  useCalendar,
+  getDaysInMonth,
+  getFirstDayOfMonth,
+  isSameDay,
+} from "./useCalendar";
+
+describe("getDaysInMonth", () => {
+  it("returns 31 for January", () => {
+    expect(getDaysInMonth(2024, 0)).toBe(31);
+  });
+
+  it("returns 29 for Feb in a leap year", () => {
+    expect(getDaysInMonth(2024, 1)).toBe(29);
+  });
+
+  it("returns 28 for Feb in a non-leap year", () => {
+    expect(getDaysInMonth(2023, 1)).toBe(28);
+  });
+
+  it("returns 30 for April", () => {
+    expect(getDaysInMonth(2024, 3)).toBe(30);
+  });
+});
+
+describe("getFirstDayOfMonth", () => {
+  it("returns the correct day of week", () => {
+    // Jan 1, 2024 is a Monday (1)
+    expect(getFirstDayOfMonth(2024, 0)).toBe(1);
+  });
+});
+
+describe("isSameDay", () => {
+  it("returns true for same dates", () => {
+    const a = new Date(2024, 5, 15);
+    const b = new Date(2024, 5, 15);
+    expect(isSameDay(a, b)).toBe(true);
+  });
+
+  it("returns false for different dates", () => {
+    const a = new Date(2024, 5, 15);
+    const b = new Date(2024, 5, 16);
+    expect(isSameDay(a, b)).toBe(false);
+  });
+
+  it("ignores time differences", () => {
+    const a = new Date(2024, 5, 15, 10, 30);
+    const b = new Date(2024, 5, 15, 22, 0);
+    expect(isSameDay(a, b)).toBe(true);
+  });
+});
+
+describe("useCalendar", () => {
+  it("initializes with current month when no props", () => {
+    const now = new Date();
+    const { result } = renderHook(() => useCalendar({}));
+    expect(result.current.year).toBe(now.getFullYear());
+    expect(result.current.monthIndex).toBe(now.getMonth());
+  });
+
+  it("initializes with selected date's month", () => {
+    const selected = new Date(2024, 5, 15); // June 2024
+    const { result } = renderHook(() => useCalendar({ selected }));
+    expect(result.current.year).toBe(2024);
+    expect(result.current.monthIndex).toBe(5);
+  });
+
+  it("navigates to previous month (uncontrolled)", () => {
+    const selected = new Date(2024, 5, 15); // June 2024
+    const { result } = renderHook(() => useCalendar({ selected }));
+
+    act(() => result.current.goToPrevMonth());
+    expect(result.current.monthIndex).toBe(4); // May
+  });
+
+  it("navigates to next month (uncontrolled)", () => {
+    const selected = new Date(2024, 5, 15); // June 2024
+    const { result } = renderHook(() => useCalendar({ selected }));
+
+    act(() => result.current.goToNextMonth());
+    expect(result.current.monthIndex).toBe(6); // July
+  });
+
+  it("wraps around year boundary going backward (uncontrolled)", () => {
+    const selected = new Date(2024, 0, 15); // January 2024
+    const { result } = renderHook(() => useCalendar({ selected }));
+
+    act(() => result.current.goToPrevMonth());
+    expect(result.current.monthIndex).toBe(11); // December
+    expect(result.current.year).toBe(2023);
+  });
+
+  it("calls onMonthChange in controlled mode", () => {
+    const onMonthChange = vi.fn();
+    const month = new Date(2024, 5, 1);
+    const { result } = renderHook(() =>
+      useCalendar({ month, onMonthChange }),
+    );
+
+    act(() => result.current.goToNextMonth());
+    expect(onMonthChange).toHaveBeenCalled();
+    // Controlled: monthIndex stays the same
+    expect(result.current.monthIndex).toBe(5);
+  });
+
+  it("calls onSelect when a day is pressed", () => {
+    const onSelect = vi.fn();
+    const month = new Date(2024, 5, 1);
+    const { result } = renderHook(() => useCalendar({ month, onSelect }));
+
+    act(() => result.current.handleDayPress(15));
+    expect(onSelect).toHaveBeenCalledWith(new Date(2024, 5, 15));
+  });
+
+  it("does not call onSelect when disabled", () => {
+    const onSelect = vi.fn();
+    const month = new Date(2024, 5, 1);
+    const { result } = renderHook(() =>
+      useCalendar({ month, onSelect, disabled: true }),
+    );
+
+    act(() => result.current.handleDayPress(15));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("generates correct cells array", () => {
+    const month = new Date(2024, 5, 1); // June 2024 starts on Saturday (6)
+    const { result } = renderHook(() => useCalendar({ month }));
+
+    // June 2024: first day is Saturday (6), 30 days
+    expect(result.current.cells.filter((c) => c === null)).toHaveLength(
+      result.current.firstDay,
+    );
+    expect(result.current.cells.filter((c) => c !== null)).toHaveLength(30);
+  });
+
+  it("provides a human-readable month label", () => {
+    const month = new Date(2024, 5, 1);
+    const { result } = renderHook(() => useCalendar({ month }));
+    expect(result.current.monthLabel).toContain("June");
+    expect(result.current.monthLabel).toContain("2024");
+  });
+});

package/src/components/Calendar/useCalendar.ts

@@ -0,0 +1,94 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseCalendarProps {
+  selected?: Date;
+  onSelect?: (date: Date | undefined) => void;
+  month?: Date;
+  onMonthChange?: (month: Date) => void;
+  disabled?: boolean;
+}
+
+export function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function getFirstDayOfMonth(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isToday(date: Date): boolean {
+  return isSameDay(date, new Date());
+}
+
+export function useCalendar({
+  selected,
+  onSelect,
+  month: controlledMonth,
+  onMonthChange,
+  disabled = false,
+}: UseCalendarProps) {
+  const [displayMonth, setDisplayMonth] = useControllableState<Date>({
+    value: controlledMonth,
+    defaultValue: controlledMonth || selected || new Date(),
+    onChange: onMonthChange,
+  });
+
+  const year = displayMonth.getFullYear();
+  const monthIndex = displayMonth.getMonth();
+  const daysInMonth = getDaysInMonth(year, monthIndex);
+  const firstDay = getFirstDayOfMonth(year, monthIndex);
+
+  const monthLabel = displayMonth.toLocaleString("default", {
+    month: "long",
+    year: "numeric",
+  });
+
+  const goToPrevMonth = useCallback(() => {
+    const prev = new Date(year, monthIndex - 1, 1);
+    setDisplayMonth(prev);
+  }, [year, monthIndex, setDisplayMonth]);
+
+  const goToNextMonth = useCallback(() => {
+    const next = new Date(year, monthIndex + 1, 1);
+    setDisplayMonth(next);
+  }, [year, monthIndex, setDisplayMonth]);
+
+  const handleDayPress = useCallback(
+    (day: number) => {
+      if (disabled) return;
+      const date = new Date(year, monthIndex, day);
+      onSelect?.(date);
+    },
+    [disabled, year, monthIndex, onSelect],
+  );
+
+  const cells: (number | null)[] = [];
+  for (let i = 0; i < firstDay; i++) {
+    cells.push(null);
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push(d);
+  }
+
+  return {
+    displayMonth,
+    year,
+    monthIndex,
+    daysInMonth,
+    firstDay,
+    monthLabel,
+    cells,
+    goToPrevMonth,
+    goToNextMonth,
+    handleDayPress,
+  };
+}

package/src/components/Card/Card.native.tsx

@@ -0,0 +1,42 @@
+import { View, type ViewProps } from "react-native";
+import type { CardProps } from "./Card.types";
+import { cn } from "../../utils/cn";
+import type { GlassProps } from "../../utils/glass.native";
+import { GlassWrapper, useGlassActive } from "../../utils/withGlass.native";
+import { useTheme, remToNumber } from "../../theme/native";
+
+interface CardNativeProps extends CardProps, GlassProps, ViewProps {}
+
+function CardContent({ children, className, ...props }: Omit<CardNativeProps, "glass" | "glassEffect" | "glassTextColor">) {
+  const glassActive = useGlassActive();
+
+  return (
+    <View
+      className={cn(
+        "rounded-xl shadow-sm",
+        !glassActive && "border border-border bg-card text-card-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+function Card({ children, className, glass, glassEffect, glassTextColor: _, ...props }: CardNativeProps) {
+  const { tokens, glass: themeGlass } = useTheme();
+
+  return (
+    <GlassWrapper enabled={glass ?? themeGlass} effect={glassEffect} style={{ borderRadius: remToNumber(tokens.radius.xl) }}>
+      <CardContent className={className} {...props}>
+        {children}
+      </CardContent>
+    </GlassWrapper>
+  );
+}
+
+Card.displayName = "Card";
+
+export { Card };
+export type { CardNativeProps };

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Card } from "./Card.web";
+
+const meta = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div style={{ padding: "1.5rem" }}>
+        <h3 style={{ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.5rem" }}>
+          Card Title
+        </h3>
+        <p style={{ fontSize: "0.875rem", color: "var(--color-muted-foreground)" }}>
+          This is a basic card component with some example content.
+        </p>
+      </div>
+    ),
+    style: { width: 350 },
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    children: (
+      <div style={{ padding: "1.5rem" }}>
+        <p style={{ fontSize: "0.875rem" }}>A simple card with just text content.</p>
+      </div>
+    ),
+    style: { width: 300 },
+  },
+};

package/src/components/Card/Card.types.ts

@@ -0,0 +1,4 @@
+export interface CardProps {
+  children?: React.ReactNode;
+  className?: string;
+}