@byldpartners/ui 0.0.1

package/dist/theme/web.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+
+var _chunk464G63BOcjs = require('../chunk-464G63BO.cjs');
+
+
+
+
+
+
+exports.ThemeProvider = _chunk464G63BOcjs.ThemeProvider; exports.auroraPreset = _chunk464G63BOcjs.auroraPreset; exports.darkPreset = _chunk464G63BOcjs.darkPreset; exports.defaultPreset = _chunk464G63BOcjs.defaultPreset; exports.useTheme = _chunk464G63BOcjs.useTheme;
+//# sourceMappingURL=web.cjs.map

package/dist/theme/web.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/lucasgismondi/Desktop/dev/byld/internal/byld.ui/packages/ui/dist/theme/web.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACE;AACA;AACA;AACA;AACA;AACF,yDAA8B;AAC9B;AACE;AACA;AACA;AACA;AACA;AACF,0QAAC","file":"/Users/lucasgismondi/Desktop/dev/byld/internal/byld.ui/packages/ui/dist/theme/web.cjs"}

package/dist/theme/web.d.cts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+
+interface ThemeColors {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+}
+interface ThemeRadius {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+}
+interface ThemeTypography {
+    fontFamily: string;
+    fontFamilyMono: string;
+}
+interface ThemeShadow {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface ThemeTokens {
+    colors: ThemeColors;
+    radius: ThemeRadius;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    shadow?: ThemeShadow;
+}
+interface ThemePreset {
+    name: string;
+    tokens: ThemeTokens;
+}
+
+declare const defaultPreset: ThemePreset;
+
+declare const darkPreset: ThemePreset;
+
+declare const auroraPreset: ThemePreset;
+
+interface ThemeContextValue {
+    theme: string;
+    setTheme: (name: string) => void;
+    tokens: ThemeTokens;
+}
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    presets?: ThemePreset[];
+}
+declare function ThemeProvider({ children, defaultTheme, presets: customPresets, }: ThemeProviderProps): react.FunctionComponentElement<react.ProviderProps<ThemeContextValue | null>>;
+
+export { type ThemeColors, type ThemePreset, ThemeProvider, type ThemeRadius, type ThemeShadow, type ThemeSpacing, type ThemeTokens, auroraPreset, darkPreset, defaultPreset, useTheme };

package/dist/theme/web.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+
+interface ThemeColors {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+}
+interface ThemeRadius {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+}
+interface ThemeTypography {
+    fontFamily: string;
+    fontFamilyMono: string;
+}
+interface ThemeShadow {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface ThemeTokens {
+    colors: ThemeColors;
+    radius: ThemeRadius;
+    spacing: ThemeSpacing;
+    typography: ThemeTypography;
+    shadow?: ThemeShadow;
+}
+interface ThemePreset {
+    name: string;
+    tokens: ThemeTokens;
+}
+
+declare const defaultPreset: ThemePreset;
+
+declare const darkPreset: ThemePreset;
+
+declare const auroraPreset: ThemePreset;
+
+interface ThemeContextValue {
+    theme: string;
+    setTheme: (name: string) => void;
+    tokens: ThemeTokens;
+}
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    presets?: ThemePreset[];
+}
+declare function ThemeProvider({ children, defaultTheme, presets: customPresets, }: ThemeProviderProps): react.FunctionComponentElement<react.ProviderProps<ThemeContextValue | null>>;
+
+export { type ThemeColors, type ThemePreset, ThemeProvider, type ThemeRadius, type ThemeShadow, type ThemeSpacing, type ThemeTokens, auroraPreset, darkPreset, defaultPreset, useTheme };

package/dist/theme/web.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  ThemeProvider,
+  auroraPreset,
+  darkPreset,
+  defaultPreset,
+  useTheme
+} from "../chunk-JFJY6DZZ.js";
+export {
+  ThemeProvider,
+  auroraPreset,
+  darkPreset,
+  defaultPreset,
+  useTheme
+};
+//# sourceMappingURL=web.js.map

package/dist/theme/web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@byldpartners/ui",
+  "version": "0.0.1",
+  "description": "Cross-platform UI component library for web and React Native",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/byldpartners/byld.ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/byldpartners/byld.ui.git"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": {
+      "react-native": "./src/theme/native.ts",
+      "types": "./dist/theme/web.d.ts",
+      "import": "./dist/theme/web.js"
+    },
+    "./src/*": "./src/*"
+  },
+  "react-native": "./src/index.native.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit && tsc --noEmit -p tsconfig.native.json",
+    "clean": "rm -rf dist",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-hover-card": "^1.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "react-resizable-panels": "^4.7.2",
+    "tailwind-merge": "^3.0.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.2.17",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^28.0.0",
+    "lucide-react-native": "^0.577.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native-svg": "^15.15.3",
+    "tsup": "^8.3.0",
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.0"
+  },
+  "peerDependencies": {
+    "lucide-react-native": ">=0.300",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-native": ">=0.81",
+    "react-native-svg": ">=13.0",
+    "uniwind": ">=1.0",
+    "expo-glass-effect": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "lucide-react-native": {
+      "optional": true
+    },
+    "uniwind": {
+      "optional": true
+    },
+    "expo-glass-effect": {
+      "optional": true
+    }
+  }
+}

package/src/components/Accordion/Accordion.native.tsx

@@ -0,0 +1,195 @@
+import { createContext, useCallback, useContext, useRef } from "react";
+import {
+  Animated,
+  LayoutAnimation,
+  Pressable,
+  Text,
+  UIManager,
+  View,
+  type ViewProps,
+} from "react-native";
+import { ChevronDown } from "lucide-react-native";
+import type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from "./Accordion.types";
+import { useAccordion } from "./useAccordion";
+import { Icon } from "../Icon/Icon.native";
+import { cn } from "../../utils/cn";
+
+let layoutAnimationEnabled = false;
+function ensureLayoutAnimationEnabled() {
+  if (layoutAnimationEnabled) return;
+  try {
+    if (typeof UIManager.setLayoutAnimationEnabledExperimental === "function") {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  } catch {
+    // no-op on iOS or when unsupported
+  }
+  layoutAnimationEnabled = true;
+}
+
+// --- Context ---
+
+interface AccordionContextValue {
+  expandedItems: string[];
+  toggle: (value: string) => void;
+}
+
+const AccordionContext = createContext<AccordionContextValue>({
+  expandedItems: [],
+  toggle: () => {},
+});
+
+interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+  disabled: boolean;
+}
+
+const AccordionItemContext = createContext<AccordionItemContextValue>({
+  value: "",
+  isExpanded: false,
+  disabled: false,
+});
+
+// --- Accordion Root ---
+
+interface AccordionNativeProps extends AccordionProps, ViewProps {}
+
+function Accordion({
+  type = "single",
+  collapsible = false,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  ...props
+}: AccordionNativeProps) {
+  const { expandedItems, toggle: hookToggle } = useAccordion({
+    type,
+    collapsible,
+    defaultValue,
+    value: controlledValue,
+    onValueChange,
+  });
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      ensureLayoutAnimationEnabled();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      hookToggle(itemValue);
+    },
+    [hookToggle],
+  );
+
+  return (
+    <AccordionContext.Provider value={{ expandedItems, toggle }}>
+      <View {...props}>{children}</View>
+    </AccordionContext.Provider>
+  );
+}
+Accordion.displayName = "Accordion";
+
+// --- AccordionItem ---
+
+interface AccordionItemNativeProps extends ViewProps, AccordionItemProps {}
+
+function AccordionItem({
+  value,
+  disabled = false,
+  children,
+  ...props
+}: AccordionItemNativeProps) {
+  const { expandedItems } = useContext(AccordionContext);
+  const isExpanded = expandedItems.includes(value);
+
+  return (
+    <AccordionItemContext.Provider value={{ value, isExpanded, disabled }}>
+      <View className="border-b border-border" {...props}>
+        {children}
+      </View>
+    </AccordionItemContext.Provider>
+  );
+}
+AccordionItem.displayName = "AccordionItem";
+
+// --- AccordionTrigger ---
+
+interface AccordionTriggerNativeProps extends AccordionTriggerProps {
+  onPress?: () => void;
+}
+
+function AccordionTrigger({
+  children,
+  onPress,
+  ...props
+}: AccordionTriggerNativeProps) {
+  const { toggle } = useContext(AccordionContext);
+  const { value, isExpanded, disabled } = useContext(AccordionItemContext);
+  const rotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    toggle(value);
+    Animated.timing(rotation, {
+      toValue: isExpanded ? 0 : 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+    onPress?.();
+  }, [disabled, toggle, value, isExpanded, rotation, onPress]);
+
+  const rotate = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={disabled}
+      className={cn(
+        "flex-row items-center justify-between py-4",
+        disabled && "opacity-50",
+      )}
+    >
+      {typeof children === "string" ? (
+        <Text className="text-sm font-medium text-foreground flex-1">{children}</Text>
+      ) : (
+        <View className="flex-1">{children}</View>
+      )}
+      <Animated.View style={{ transform: [{ rotate }] }}>
+        <Icon icon={ChevronDown} size={16} className="text-muted-foreground" />
+      </Animated.View>
+    </Pressable>
+  );
+}
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// --- AccordionContent ---
+
+interface AccordionContentNativeProps extends AccordionContentProps {}
+
+function AccordionContent({ children }: AccordionContentNativeProps) {
+  const { isExpanded } = useContext(AccordionItemContext);
+
+  if (!isExpanded) return null;
+
+  return (
+    <View className="pb-4 pt-0">
+      {typeof children === "string" ? (
+        <Text className="text-sm text-muted-foreground">{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export type { AccordionNativeProps, AccordionItemNativeProps };

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./Accordion.web";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: "single",
+    collapsible: true,
+    style: { width: 360 },
+    children: (
+      <>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that match your theme.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It uses CSS animations for smooth transitions.
+          </AccordionContent>
+        </AccordionItem>
+      </>
+    ),
+  },
+};

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,28 @@
+export type AccordionType = "single" | "multiple";
+
+export interface AccordionProps {
+  type?: AccordionType;
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AccordionItemProps {
+  value: string;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+export interface AccordionTriggerProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AccordionContentProps {
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Accordion/Accordion.web.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../utils/cn";
+
+function ChevronDownIcon(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="m6 9 6 6 6-6"/>
+    </svg>
+  );
+}
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,12 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./Accordion.native";
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from "./Accordion.types";

package/src/components/Accordion/index.ts

@@ -0,0 +1,12 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./Accordion.web";
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from "./Accordion.types";