@brand-map/primitives 0.0.0-broken.0

package/src/slider/types.ts

@@ -0,0 +1,39 @@
+import type { RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  value: number;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  inverted?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  step?: number;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onValueChange?: (value: number[]) => void;
+};
+
+type TrackProps = RenderViewProps;
+type RangeProps = RenderViewProps;
+type ThumbProps = RenderViewProps;
+
+type RootRef = ViewRef;
+type TrackRef = ViewRef;
+type RangeRef = ViewRef;
+type ThumbRef = ViewRef;
+
+export type { RangeProps, RangeRef, RootProps, RootRef, ThumbProps, ThumbRef, TrackProps, TrackRef };

package/src/slot/index.ts

@@ -0,0 +1 @@
+export * from "./slot";

package/src/slot/slot.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import { cloneElement, isValidElement } from "react";
+import {
+  Image as ReactNativeImage,
+  Pressable as ReactNativePressable,
+  Text as ReactNativeText,
+  View as ReactNativeView,
+  StyleSheet,
+  type PressableStateCallbackType,
+  type ImageStyle as ReactNativeImageStyle,
+  type PressableProps as ReactNativePressableProps,
+  type StyleProp,
+} from "react-native";
+
+import { BrandMapUIComponentProps } from "../types";
+
+// TODO: handle children as callback
+
+const Pressable = (props: BrandMapUIComponentProps<typeof ReactNativePressable>): React.JSX.Element => {
+  const { children, render, ...rest } = props;
+
+  if (!render) {
+    return <ReactNativePressable {...rest}>{children}</ReactNativePressable>;
+  }
+
+  if (!isValidElement(render)) {
+    console.log("Slot.Pressable - Invalid render prop", render);
+    return <></>;
+  }
+
+  return cloneElement<React.ComponentPropsWithRef<typeof ReactNativePressable>>(
+    isTextChildren(render) ? <></> : render,
+
+    {
+      // @ts-expect-error
+      ...mergeProps(rest, render.props),
+
+      // @ts-expect-error
+      ref: props.ref ? composeRefs(props.ref, render.ref) : render.ref,
+      children,
+    },
+  );
+};
+// Pressable.displayName = "SlotPressable";
+
+const View = (props: BrandMapUIComponentProps<typeof ReactNativeView>): React.JSX.Element => {
+  const { children, render, ...rest } = props;
+
+  if (!render) {
+    return <ReactNativeView {...rest}>{children}</ReactNativeView>;
+  }
+
+  if (!isValidElement(render)) {
+    console.log("Slot.View - Invalid render prop", render);
+    return <></>;
+  }
+
+  return cloneElement<React.ComponentPropsWithRef<typeof ReactNativeView>>(
+    isTextChildren(render) ? <></> : render,
+
+    {
+      // @ts-expect-error
+      ...mergeProps(rest, render.props),
+
+      // @ts-expect-error
+      ref: props.ref ? composeRefs(props.ref, render.ref) : render.ref,
+      children,
+    },
+  );
+};
+// View.displayName = "SlotView";
+
+const Text = (props: BrandMapUIComponentProps<typeof ReactNativeText>): React.JSX.Element => {
+  const { children, render, ...rest } = props;
+
+  if (!render) {
+    return <ReactNativeText {...rest}>{children}</ReactNativeText>;
+  }
+
+  if (!isValidElement(render)) {
+    console.log("Slot.Text - Invalid render prop", render);
+    return <></>;
+  }
+
+  return cloneElement<React.ComponentPropsWithRef<typeof ReactNativeText>>(
+    isTextChildren(render) ? <></> : render,
+
+    {
+      // @ts-expect-error
+      ...mergeProps(rest, render.props),
+
+      // @ts-expect-error
+      ref: props.ref ? composeRefs(props.ref, render.ref) : render.ref,
+      children,
+    },
+  );
+};
+// Text.displayName = "SlotText";
+
+const Image = (props: BrandMapUIComponentProps<typeof ReactNativeImage> /**  & { children?: React.ReactNode } */): React.JSX.Element => {
+  const { render, ...rest } = props;
+
+  if (!render) {
+    return <ReactNativeImage {...rest} />;
+  }
+
+  if (!isValidElement(render)) {
+    console.log("Slot.Image - Invalid render prop", render);
+    return <></>;
+  }
+
+  return cloneElement<React.ComponentPropsWithRef<typeof ReactNativeImage>>(isTextChildren(render) ? <></> : render, {
+    // @ts-expect-error
+    ...mergeProps(rest, render.props),
+
+    // @ts-expect-error
+    ref: props.ref ? composeRefs(props.ref, render.ref) : render.ref,
+    // children,
+  });
+};
+// Image.displayName = "SlotImage";
+
+export { Image, Pressable, Text, View };
+
+// This project uses code from WorkOS/Radix Primitives.
+// The code is licensed under the MIT License.
+// https://github.com/radix-ui/primitives/tree/main
+
+function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
+  return (node: T) => {
+    for (const ref of refs) {
+      switch (true) {
+        case !ref:
+          continue;
+
+        case typeof ref === "function":
+          ref(node);
+          continue;
+
+        case !!ref:
+          ref.current = node;
+          continue;
+
+        default:
+          throw new Error(`Must never reach. Invalid ref provided: ${ref}`);
+      }
+    }
+  };
+}
+
+type AnyProps = Record<string, any>;
+
+function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    if (propName.startsWith("on")) {
+      if (!childPropValue && !slotPropValue) {
+        continue;
+      }
+
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: any[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+
+      // but if it exists only on the slot, we use only this one
+      if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+
+      continue;
+    }
+
+    // if it's `style`, we merge them
+    if (propName === "style") {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    }
+
+    // if it's `className`, we merge them
+    if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+type PressableStyle = ReactNativePressableProps["style"];
+type ImageStyle = StyleProp<ReactNativeImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === "function" && typeof childValue === "function") {
+    return (state: PressableStateCallbackType) => {
+      return StyleSheet.flatten([slotStyle(state), childValue(state)]);
+    };
+  }
+
+  if (typeof slotStyle === "function") {
+    return (state: PressableStateCallbackType) => {
+      return childValue ? StyleSheet.flatten([slotStyle(state), childValue]) : slotStyle(state);
+    };
+  }
+
+  if (typeof childValue === "function") {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle ? StyleSheet.flatten([slotStyle, childValue(state)]) : childValue(state);
+    };
+  }
+
+  return StyleSheet.flatten([slotStyle, childValue].filter(Boolean));
+}
+
+export function isTextChildren(children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode)): children is string | string[] {
+  return Array.isArray(children) ? children.every((child) => typeof child === "string") : typeof children === "string";
+}

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export * from "./switch";
+export * from "./types";

package/src/switch/switch.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { RootProps, RootRef, ThumbProps, ThumbRef } from "./types";
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, checked, onCheckedChange, disabled, onPress: onPressProp, "aria-valuetext": ariaValueText, ...props }, ref) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onCheckedChange(!checked);
+      onPressProp?.(ev);
+    }
+
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role="switch"
+        aria-checked={checked}
+        aria-valuetext={(ariaValueText ?? checked) ? "on" : "off"}
+        onPress={onPress}
+        accessibilityState={{
+          checked,
+          disabled,
+        }}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  },
+);
+
+Root.displayName = "RootNativeSwitch";
+
+const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+Thumb.displayName = "ThumbNativeSwitch";
+
+export { Root, Thumb };

package/src/switch/switch.web.tsx

@@ -0,0 +1,60 @@
+// import * as Switch from "@radix-ui/react-switch";
+// import * as React from "react";
+// import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { RootProps, RootRef, ThumbProps, ThumbRef } from "./types";
+
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   ({ render, checked, onCheckedChange, disabled, onPress: onPressProp, onKeyDown: onKeyDownProp, ...props }, ref) => {
+//     function onPress(ev: GestureResponderEvent) {
+//       onCheckedChange(!checked);
+//       onPressProp?.(ev);
+//     }
+
+//     function onKeyDown(ev: React.KeyboardEvent) {
+//       onKeyDownProp?.(ev);
+//       if (ev.key === " ") {
+//         onCheckedChange(!checked);
+//       }
+//     }
+
+//
+//     return (
+//       <Switch.Root
+//         checked={checked}
+//         onCheckedChange={onCheckedChange}
+//         disabled={disabled}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           disabled={disabled}
+//           onPress={onPress}
+//           // @ts-expect-error Web only
+//           onKeyDown={onKeyDown}
+//           {...props}
+//         />
+//       </Switch.Root>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebSwitch";
+
+// const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Switch.Thumb render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Switch.Thumb>
+//   );
+// });
+
+// Thumb.displayName = "ThumbWebSwitch";
+
+// export { Root, Thumb };

package/src/switch/types.ts

@@ -0,0 +1,19 @@
+import type { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderPressableProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  onKeyDown?: (ev: React.KeyboardEvent) => void;
+};
+
+type ThumbProps = RenderViewProps;
+
+type RootRef = PressableRef;
+type ThumbRef = ViewRef;
+
+export type { RootProps, RootRef, ThumbProps, ThumbRef };

package/src/table/index.ts

@@ -0,0 +1 @@
+export * from "./table";

package/src/table/table.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { Pressable, View } from "react-native";
+
+import * as Slot from "../slot";
+import type { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps;
+type RootRef = ViewRef;
+
+const Root = React.forwardRef<RootRef, RootProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      role="table"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Root.displayName = "RootTable";
+
+type HeaderProps = RenderViewProps;
+type HeaderRef = ViewRef;
+
+const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      role="rowheader"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Header.displayName = "HeaderTable";
+
+type RowProps = RenderPressableProps;
+type RowRef = PressableRef;
+
+const Row = React.forwardRef<RowRef, RowProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="row"
+      {...props}
+    />
+  );
+});
+Row.displayName = "RowTable";
+
+type HeadProps = RenderViewProps;
+type HeadRef = ViewRef;
+
+const Head = React.forwardRef<HeadRef, HeadProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="columnheader"
+      {...props}
+    />
+  );
+});
+Head.displayName = "HeadTable";
+
+type BodyProps = RenderViewProps;
+type BodyRef = ViewRef;
+
+const Body = React.forwardRef<BodyRef, BodyProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="rowgroup"
+      {...props}
+    />
+  );
+});
+Body.displayName = "BodyTable";
+
+type CellProps = RenderViewProps;
+type CellRef = ViewRef;
+
+const Cell = React.forwardRef<CellRef, CellProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="cell"
+      {...props}
+    />
+  );
+});
+Cell.displayName = "CellTable";
+
+type FooterProps = RenderViewProps;
+type FooterRef = ViewRef;
+
+const Footer = React.forwardRef<FooterRef, FooterProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="rowgroup"
+      {...props}
+    />
+  );
+});
+Footer.displayName = "FooterTable";
+
+export { Body, Cell, Footer, Head, Header, Root, Row };
+export type {
+  BodyProps,
+  BodyRef,
+  CellProps,
+  CellRef,
+  FooterProps,
+  FooterRef,
+  HeaderProps,
+  HeaderRef,
+  HeadProps,
+  HeadRef,
+  RootProps,
+  RootRef,
+  RowProps,
+  RowRef,
+};

package/src/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./tabs";
+export * from "./types";

package/src/tabs/tabs.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { ContentProps, ContentRef, ListProps, ListRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+interface RootContext extends RootProps {
+  nativeID: string;
+}
+
+const TabsContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, value, onValueChange, orientation: _orientation, dir: _dir, activationMode: _activationMode, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+
+    return (
+      <TabsContext.Provider
+        value={{
+          value,
+          onValueChange,
+          nativeID,
+        }}
+      >
+        <Component
+          ref={ref}
+          {...viewProps}
+        />
+      </TabsContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeTabs";
+
+function useRootContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
+  }
+  return context;
+}
+
+const List = React.forwardRef<ListRef, ListProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="tablist"
+      {...props}
+    />
+  );
+});
+
+List.displayName = "ListNativeTabs";
+
+const TriggerContext = React.createContext<{ value: string } | null>(null);
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled, value: tabValue, ...props }, ref) => {
+  const { onValueChange, value: rootValue, nativeID } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onValueChange(tabValue);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <TriggerContext.Provider value={{ value: tabValue }}>
+      <Component
+        ref={ref}
+        nativeID={`${nativeID}-tab-${tabValue}`}
+        aria-disabled={!!disabled}
+        aria-selected={rootValue === tabValue}
+        role="tab"
+        onPress={onPress}
+        accessibilityState={{
+          selected: rootValue === tabValue,
+          disabled: !!disabled,
+        }}
+        disabled={!!disabled}
+        {...props}
+      />
+    </TriggerContext.Provider>
+  );
+});
+
+Trigger.displayName = "TriggerNativeTabs";
+
+function useTriggerContext() {
+  const context = React.useContext(TriggerContext);
+  if (!context) {
+    throw new Error("Tabs.Trigger compound components cannot be rendered outside the Tabs.Trigger component");
+  }
+  return context;
+}
+
+const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, value: tabValue, ...props }, ref) => {
+  const { value: rootValue, nativeID } = useRootContext();
+
+  if (!keepMounted) {
+    if (rootValue !== tabValue) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-hidden={!(keepMounted || rootValue === tabValue)}
+      aria-labelledby={`${nativeID}-tab-${tabValue}`}
+      role="tabpanel"
+      {...props}
+    />
+  );
+});
+
+Content.displayName = "ContentNativeTabs";
+
+export { Content, List, Root, Trigger, useRootContext, useTriggerContext };