@brand-map/primitives 0.0.0-broken.0

package/src/avatar/avatar.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { type ImageErrorEventData, type ImageLoadEventData, type ImageSourcePropType, type NativeSyntheticEvent, Image as RNImage, View } from "react-native";
+
+import { useIsomorphicLayoutEffect } from "../hooks";
+import * as Slot from "../slot";
+
+import type { FallbackProps, FallbackRef, ImageProps, ImageRef, RootProps, RootRef } from "./types";
+
+type AvatarState = "loading" | "error" | "loaded";
+
+interface RootContextInterface extends RootProps {
+  status: AvatarState;
+  setStatus: (status: AvatarState) => void;
+}
+
+const RootContext = React.createContext<RootContextInterface | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ alt, ...viewProps }, ref) => {
+  const [status, setStatus] = React.useState<AvatarState>("error");
+
+  return (
+    <RootContext.Provider value={{ alt, status, setStatus }}>
+      <Component
+        ref={ref}
+        {...viewProps}
+      />
+    </RootContext.Provider>
+  );
+});
+
+Root.displayName = "RootAvatar";
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("Avatar compound components cannot be rendered outside the Avatar component");
+  }
+  return context;
+}
+
+const Image = React.forwardRef<ImageRef, ImageProps>(({ onLoad: onLoadProps, onError: onErrorProps, onLoadingStatusChange, ...props }, ref) => {
+  const { alt, setStatus, status } = useRootContext();
+
+  useIsomorphicLayoutEffect(() => {
+    if (isValidSource(props?.source)) {
+      setStatus("loading");
+    }
+
+    return () => {
+      setStatus("error");
+    };
+  }, [props?.source]);
+
+  const onLoad = React.useCallback(
+    (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+      setStatus("loaded");
+      onLoadingStatusChange?.("loaded");
+      onLoadProps?.(e);
+    },
+    [onLoadProps],
+  );
+
+  const onError = React.useCallback(
+    (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+      setStatus("error");
+      onLoadingStatusChange?.("error");
+      onErrorProps?.(e);
+    },
+    [onErrorProps],
+  );
+
+  if (status === "error") {
+    return null;
+  }
+
+  return (
+    <Component
+      ref={ref}
+      alt={alt}
+      onLoad={onLoad}
+      onError={onError}
+      {...props}
+    />
+  );
+});
+
+Image.displayName = "ImageAvatar";
+
+const Fallback = React.forwardRef<FallbackRef, FallbackProps>(({ ...props }, ref) => {
+  const { alt, status } = useRootContext();
+
+  if (status !== "error") {
+    return null;
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role={"img"}
+      aria-label={alt}
+      {...props}
+    />
+  );
+});
+
+Fallback.displayName = "FallbackAvatar";
+
+export { Fallback, Image, Root };
+
+function isValidSource(source?: ImageSourcePropType) {
+  if (!source) {
+    return false;
+  }
+  // Using require() for the source returns a number
+  if (typeof source === "number") {
+    return true;
+  }
+  if (Array.isArray(source)) {
+    return source.some((source) => !!source.uri);
+  }
+  return !!source.uri;
+}

package/src/avatar/index.ts

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

package/src/avatar/types.ts

@@ -0,0 +1,20 @@
+import type { Image } from "react-native";
+
+import type { ComponentPropsWithRender, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  alt: string;
+};
+
+type ImageProps = Omit<ComponentPropsWithRender<typeof Image>, "alt"> & {
+  children?: React.ReactNode;
+  onLoadingStatusChange?: (status: "error" | "loaded") => void;
+};
+
+type FallbackProps = RenderViewProps;
+
+type RootRef = ViewRef;
+type ImageRef = React.ElementRef<typeof Image>;
+type FallbackRef = ViewRef;
+
+export type { FallbackProps, FallbackRef, ImageProps, ImageRef, RootProps, RootRef };

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { GestureResponderEvent, Pressable, View } from "react-native";
+
+import * as Slot from "../slot";
+import type { PressableRef, RenderPressableProps } from "../types";
+
+import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
+
+interface RootContext extends RootProps {
+  nativeID?: string;
+}
+
+const CheckboxContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ disabled = false, checked, onCheckedChange, nativeID, ...props }, ref) => {
+  return (
+    <CheckboxContext.Provider
+      value={{
+        disabled,
+        checked,
+        onCheckedChange,
+        nativeID,
+      }}
+    >
+      <Trigger
+        ref={ref}
+        {...props}
+      />
+    </CheckboxContext.Provider>
+  );
+});
+
+Root.displayName = "RootNativeCheckbox";
+
+function useCheckboxContext() {
+  const context = React.useContext(CheckboxContext);
+  if (!context) {
+    throw new Error("Checkbox compound components cannot be rendered outside the Checkbox component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, RenderPressableProps>(({ onPress: onPressProp, ...props }, ref) => {
+  const { disabled, checked, onCheckedChange, nativeID } = useCheckboxContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    const newValue = !checked;
+    onCheckedChange(newValue);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      nativeID={nativeID}
+      aria-disabled={disabled}
+      role="checkbox"
+      aria-checked={checked}
+      onPress={onPress}
+      accessibilityState={{
+        checked,
+        disabled,
+      }}
+      disabled={disabled}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeCheckbox";
+
+const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+  const { checked, disabled } = useCheckboxContext();
+
+  if (!keepMounted) {
+    if (!checked) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled}
+      aria-hidden={!(keepMounted || checked)}
+      role={"presentation"}
+      {...props}
+    />
+  );
+});
+
+Indicator.displayName = "IndicatorNativeCheckbox";
+
+export { Indicator, Root };

package/src/checkbox/checkbox.web.tsx

@@ -0,0 +1,111 @@
+// import * as Checkbox from "@radix-ui/react-checkbox";
+// import * as React from "react";
+// import { GestureResponderEvent, Pressable, View } from "react-native";
+
+// import { useAugmentedRef, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+
+// import type { IndicatorProps, IndicatorRef, RootProps, RootRef } from "./types";
+
+// const CheckboxContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ disabled, checked, onCheckedChange, onPress: onPressProp, role: _role, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onPressProp?.(ev);
+//     onCheckedChange(!checked);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = checked ? "checked" : "unchecked";
+//       augRef.value = checked ? "on" : "off";
+//     }
+//   }, [checked]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+//       augRef.role = "checkbox";
+
+//       if (disabled) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled]);
+
+//
+//   return (
+//     <CheckboxContext.Provider value={{ checked, disabled, onCheckedChange }}>
+//       <Checkbox.Root
+//         checked={checked}
+//         onCheckedChange={onCheckedChange}
+//         disabled={disabled}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           role="button"
+//           onPress={onPress}
+//           disabled={disabled}
+//           {...props}
+//         />
+//       </Checkbox.Root>
+//     </CheckboxContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebCheckbox";
+
+// function useCheckboxContext() {
+//   const context = React.useContext(CheckboxContext);
+//   if (context === null) {
+//     throw new Error("Checkbox compound components cannot be rendered outside the Checkbox component");
+//   }
+//   return context;
+// }
+
+// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+//   const { checked, disabled } = useCheckboxContext();
+//   const augmentedRef = useAugmentedRef({ ref });
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = checked ? "checked" : "unchecked";
+//     }
+//   }, [checked]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       if (disabled) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled]);
+
+//
+//   return (
+//     <Checkbox.Indicator
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Checkbox.Indicator>
+//   );
+// });
+
+// Indicator.displayName = "IndicatorWebCheckbox";
+
+// export { Indicator, Root };

package/src/checkbox/index.ts

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

package/src/checkbox/types.ts

@@ -0,0 +1,14 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderPressableProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+};
+
+type IndicatorProps = KeepMountable & RenderViewProps;
+
+type RootRef = PressableRef;
+type IndicatorRef = ViewRef;
+
+export type { IndicatorProps, IndicatorRef, RootProps, RootRef };

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import { useControllableState } from "../hooks";
+import * as Slot from "../slot";
+
+import type { ContentProps, ContentRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+const CollapsibleContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, disabled = false, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+
+    return (
+      <CollapsibleContext.Provider
+        value={{
+          disabled,
+          open,
+          onOpenChange,
+          nativeID,
+        }}
+      >
+        <Component
+          ref={ref}
+          {...viewProps}
+        />
+      </CollapsibleContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeCollapsible";
+
+function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components cannot be rendered outside the Collapsible component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
+  const { disabled, open, onOpenChange, nativeID } = useCollapsibleContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled || disabledProp) return;
+    onOpenChange(!open);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      nativeID={nativeID}
+      aria-disabled={(disabled || disabledProp) ?? undefined}
+      role="button"
+      onPress={onPress}
+      accessibilityState={{
+        expanded: open,
+        disabled: (disabled || disabledProp) ?? undefined,
+      }}
+      disabled={disabled || disabledProp}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeCollapsible";
+
+const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+  const { nativeID, open } = useCollapsibleContext();
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-hidden={!(keepMounted || open)}
+      aria-labelledby={nativeID}
+      role={"region"}
+      {...props}
+    />
+  );
+});
+
+Content.displayName = "ContentNativeCollapsible";
+
+export { Content, Root, Trigger };

package/src/collapsible/collapsible.web.tsx

@@ -0,0 +1,149 @@
+// import * as Collapsible from "@radix-ui/react-collapsible";
+// import * as React from "react";
+// import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+
+// import type { ContentProps, ContentRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+// const CollapsibleContext = React.createContext<RootContext | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   ({ render, disabled = false, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//     const [open = false, onOpenChange] = useControllableState({
+//       prop: openProp,
+//       defaultProp: defaultOpen,
+//       onChange: onOpenChangeProp,
+//     });
+//     const augmentedRef = useAugmentedRef({ ref });
+
+//     useIsomorphicLayoutEffect(() => {
+//       if (augmentedRef.current) {
+//         const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//         augRef.dataset.state = open ? "open" : "closed";
+//       }
+//     }, [open]);
+
+//     useIsomorphicLayoutEffect(() => {
+//       if (augmentedRef.current) {
+//         const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//         if (disabled) {
+//           augRef.dataset.disabled = "true";
+//         } else {
+//           augRef.dataset.disabled = undefined;
+//         }
+//       }
+//     }, [disabled]);
+
+//
+//     return (
+//       <CollapsibleContext.Provider
+//         value={{
+//           disabled,
+//           open,
+//           onOpenChange,
+//         }}
+//       >
+//         <Collapsible.Root
+//           open={open}
+//           defaultOpen={defaultOpen}
+//           onOpenChange={onOpenChange}
+//           disabled={disabled}
+//         >
+//           <Component
+//             ref={ref}
+//             {...viewProps}
+//           />
+//         </Collapsible.Root>
+//       </CollapsibleContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebCollapsible";
+
+// function useCollapsibleContext() {
+//   const context = React.useContext(CollapsibleContext);
+//   if (!context) {
+//     throw new Error("Collapsible compound components cannot be rendered outside the Collapsible component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled: disabledProp = false, ...props }, ref) => {
+//   const { disabled, open, onOpenChange } = useCollapsibleContext();
+//   const augmentedRef = useAugmentedRef({ ref });
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//     }
+//   }, [open]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+
+//       if (disabled) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled]);
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onPressProp?.(ev);
+//     onOpenChange(!open);
+//   }
+
+//
+//   return (
+//     <Collapsible.Trigger
+//       disabled={disabled}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         role="button"
+//         onPress={onPress}
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Collapsible.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebCollapsible";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { open } = useCollapsibleContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <Collapsible.Content
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </Collapsible.Content>
+//   );
+// });
+
+// Content.displayName = "ContentWebCollapsible";
+
+// export { Content, Root, Trigger };

package/src/collapsible/index.ts

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

package/src/collapsible/types.ts

@@ -0,0 +1,23 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+interface RootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  disabled: boolean;
+}
+
+type RootProps = RenderViewProps & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+};
+
+type TriggerProps = RenderPressableProps;
+type ContentProps = KeepMountable & RenderViewProps;
+
+type RootRef = ViewRef;
+type TriggerRef = PressableRef;
+type ContentRef = ViewRef;
+
+export type { ContentProps, ContentRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef };