@brand-map/primitives 0.0.0-broken.0

package/src/progress/types.ts

@@ -0,0 +1,14 @@
+import { RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  value?: number | null | undefined;
+  max?: number;
+  getValueLabel?(value: number, max: number): string;
+};
+
+type IndicatorProps = RenderViewProps;
+
+type RootRef = ViewRef;
+type IndicatorRef = ViewRef;
+
+export type { IndicatorProps, IndicatorRef, RootProps, RootRef };

package/src/radio-group/index.ts

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

package/src/radio-group/radio-group.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootRef } from "./types";
+
+const RadioGroupContext = React.createContext<RootProps | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value,
+        disabled,
+        onValueChange,
+      }}
+    >
+      <Component
+        ref={ref}
+        role="radiogroup"
+        {...viewProps}
+      />
+    </RadioGroupContext.Provider>
+  );
+});
+
+Root.displayName = "RootRadioGroup";
+
+function useRadioGroupContext() {
+  const context = React.useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
+  }
+  return context;
+}
+
+interface RadioItemContext {
+  itemValue: string | undefined;
+}
+
+const RadioItemContext = React.createContext<RadioItemContext | null>(null);
+
+const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+  const { disabled, value, onValueChange } = useRadioGroupContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled || disabledProp) return;
+    onValueChange(itemValue);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <RadioItemContext.Provider
+      value={{
+        itemValue: itemValue,
+      }}
+    >
+      <Component
+        ref={ref}
+        role="radio"
+        onPress={onPress}
+        aria-checked={value === itemValue}
+        disabled={(disabled || disabledProp) ?? false}
+        accessibilityState={{
+          disabled: (disabled || disabledProp) ?? false,
+          checked: value === itemValue,
+        }}
+        {...props}
+      />
+    </RadioItemContext.Provider>
+  );
+});
+
+Item.displayName = "ItemRadioGroup";
+
+function useRadioItemContext() {
+  const context = React.useContext(RadioItemContext);
+  if (!context) {
+    throw new Error("RadioItem compound components cannot be rendered outside the RadioItem component");
+  }
+  return context;
+}
+
+const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+  const { value } = useRadioGroupContext();
+  const { itemValue } = useRadioItemContext();
+
+  if (!keepMounted) {
+    if (value !== itemValue) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+Indicator.displayName = "IndicatorRadioGroup";
+
+export { Indicator, Item, Root };

package/src/radio-group/radio-group.web.tsx

@@ -0,0 +1,85 @@
+// import * as RadioGroup from "@radix-ui/react-radio-group";
+// import * as React from "react";
+// import { GestureResponderEvent, Pressable, View } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootRef } from "./types";
+
+// const RadioGroupContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, disabled = false, ...viewProps }, ref) => {
+//
+//   return (
+//     <RadioGroupContext.Provider
+//       value={{
+//         value,
+//         disabled,
+//         onValueChange,
+//       }}
+//     >
+//       <RadioGroup.Root
+//         value={value}
+//         onValueChange={onValueChange}
+//         disabled={disabled}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </RadioGroup.Root>
+//     </RadioGroupContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootRadioGroup";
+// function useRadioGroupContext() {
+//   const context = React.useContext(RadioGroupContext);
+//   if (!context) {
+//     throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
+//   }
+//   return context;
+// }
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ value, onPress: onPressProps, ...props }, ref) => {
+//   const { onValueChange } = useRadioGroupContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProps) {
+//       onPressProps(ev);
+//     }
+//     onValueChange(value);
+//   }
+
+//
+//   return (
+//     <RadioGroup.Item
+//       value={value}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         onPress={onPress}
+//         {...props}
+//       />
+//     </RadioGroup.Item>
+//   );
+// });
+
+// Item.displayName = "ItemRadioGroup";
+
+// const Indicator = React.forwardRef<IndicatorRef, IndicatorProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <RadioGroup.Indicator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </RadioGroup.Indicator>
+//   );
+// });
+
+// Indicator.displayName = "IndicatorRadioGroup";
+
+// export { Indicator, Item, Root };

package/src/radio-group/types.ts

@@ -0,0 +1,24 @@
+import { KeepMountable, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  value: string | undefined;
+  onValueChange: (val: string) => void;
+  disabled?: boolean;
+};
+
+type ItemProps = RenderPressableProps & {
+  "value": string;
+
+  /**
+   * nativeID of the label element that describes this radio group item
+   */
+  "aria-labelledby"?: string;
+};
+
+type IndicatorProps = RenderViewProps & KeepMountable;
+
+type RootRef = ViewRef;
+type ItemRef = PressableRef;
+type IndicatorRef = ViewRef;
+
+export type { IndicatorProps, IndicatorRef, ItemProps, ItemRef, RootProps, RootRef };

package/src/select/index.ts

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

package/src/select/select.tsx

@@ -0,0 +1,447 @@
+import * as React from "react";
+import { BackHandler, Pressable, Text, View, type GestureResponderEvent, type LayoutChangeEvent, type LayoutRectangle } from "react-native";
+
+import { useAugmentedRef, useControllableState, useRelativePosition, type LayoutPosition } from "../hooks";
+import { Portal as RNPPortal } from "../portal";
+import * as Slot from "../slot";
+
+import type {
+  ContentProps,
+  ContentRef,
+  GroupProps,
+  GroupRef,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemProps,
+  ItemRef,
+  ItemTextProps,
+  ItemTextRef,
+  LabelProps,
+  LabelRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  ScrollDownButtonProps,
+  ScrollUpButtonProps,
+  SeparatorProps,
+  SeparatorRef,
+  SharedRootContext,
+  TriggerProps,
+  TriggerRef,
+  ValueProps,
+  ValueRef,
+  ViewportProps,
+} from "./types";
+
+interface RootContextInterface extends SharedRootContext {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerPosition: LayoutPosition | null;
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  contentLayout: LayoutRectangle | null;
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  nativeID: string;
+}
+
+const RootContext = React.createContext<RootContextInterface | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, value: valueProp, defaultValue, onValueChange: onValueChangeProp, onOpenChange: onOpenChangeProp, disabled, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+    const [value, onValueChange] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChangeProp,
+    });
+    const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
+    const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
+    const [open, setOpen] = React.useState(false);
+
+    function onOpenChange(value: boolean) {
+      setOpen(value);
+      onOpenChangeProp?.(value);
+    }
+
+    return (
+      <RootContext.Provider
+        value={{
+          value,
+          onValueChange,
+          open,
+          onOpenChange,
+          disabled,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+        }}
+      >
+        <Component
+          ref={ref}
+          {...viewProps}
+        />
+      </RootContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeSelect";
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error("Select compound components cannot be rendered outside the Select component");
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { open, onOpenChange, disabled: disabledRoot, setTriggerPosition } = useRootContext();
+
+  const augmentedRef = useAugmentedRef({
+    ref,
+    methods: {
+      open: () => {
+        onOpenChange(true);
+        augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setTriggerPosition({ width, pageX, pageY: pageY, height });
+        });
+      },
+      close: () => {
+        setTriggerPosition(null);
+        onOpenChange(false);
+      },
+    },
+  });
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setTriggerPosition({ width, pageX, pageY: pageY, height });
+    });
+    onOpenChange(!open);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={augmentedRef}
+      aria-disabled={disabled ?? undefined}
+      role="combobox"
+      onPress={onPress}
+      disabled={disabled ?? disabledRoot}
+      aria-expanded={open}
+      {...props}
+    />
+  );
+});
+
+Trigger.displayName = "TriggerNativeSelect";
+
+const Value = React.forwardRef<ValueRef, ValueProps>(({ placeholder, ...props }, ref) => {
+  const { value } = useRootContext();
+
+  return (
+    <Component
+      ref={ref}
+      {...props}
+    >
+      {value?.label ?? placeholder}
+    </Component>
+  );
+});
+
+Value.displayName = "ValueNativeSelect";
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset.
+ */
+function Portal({ keepMounted, hostName, children }: PortalProps) {
+  const value = useRootContext();
+
+  if (!value.triggerPosition) {
+    return null;
+  }
+
+  if (!keepMounted) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal
+      hostName={hostName}
+      name={`${value.nativeID}_portal`}
+    >
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
+  const { open, onOpenChange, setTriggerPosition, setContentLayout } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      setTriggerPosition(null);
+      setContentLayout(null);
+      onOpenChange(false);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeSelect";
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
+ */
+const Content = React.forwardRef<ContentRef, ContentProps>(
+  (
+    {
+      render = false,
+      keepMounted,
+      align = "start",
+      side = "bottom",
+      sideOffset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      position: _position,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, contentLayout, nativeID, triggerPosition, setContentLayout, setTriggerPosition } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      sideOffset,
+      side,
+      disablePositioningStyle,
+    });
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!keepMounted) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    return (
+      <Component
+        ref={ref}
+        role="list"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={[positionStyle, style]}
+        onLayout={onLayout}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  },
+);
+
+Content.displayName = "ContentNativeSelect";
+
+const ItemContext = React.createContext<{
+  itemValue: string;
+  label: string;
+} | null>(null);
+
+const Item = React.forwardRef<ItemRef, ItemProps>(
+  ({ render, value: itemValue, label, onPress: onPressProp, disabled = false, closeOnPress = true, ...props }, ref) => {
+    const { onOpenChange, value, onValueChange, setTriggerPosition, setContentLayout } = useRootContext();
+    function onPress(ev: GestureResponderEvent) {
+      if (closeOnPress) {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        onOpenChange(false);
+      }
+
+      onValueChange({ value: itemValue, label });
+      onPressProp?.(ev);
+    }
+
+    return (
+      <ItemContext.Provider value={{ itemValue, label }}>
+        <Component
+          ref={ref}
+          role="option"
+          onPress={onPress}
+          disabled={disabled}
+          aria-checked={value?.value === itemValue}
+          aria-valuetext={label}
+          aria-disabled={!!disabled}
+          accessibilityState={{
+            disabled: !!disabled,
+            checked: value?.value === itemValue,
+          }}
+          {...props}
+        />
+      </ItemContext.Provider>
+    );
+  },
+);
+
+Item.displayName = "ItemNativeSelect";
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error("Item compound components cannot be rendered outside of an Item component");
+  }
+  return context;
+}
+
+const ItemText = React.forwardRef<ItemTextRef, ItemTextProps>(({ ...props }, ref) => {
+  const { label } = useItemContext();
+
+  return (
+    <Component
+      ref={ref}
+      {...props}
+    >
+      {label}
+    </Component>
+  );
+});
+
+ItemText.displayName = "ItemTextNativeSelect";
+
+const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted, ...props }, ref) => {
+  const { itemValue } = useItemContext();
+  const { value } = useRootContext();
+
+  if (!keepMounted) {
+    if (value?.value !== itemValue) {
+      return null;
+    }
+  }
+
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+ItemIndicator.displayName = "ItemIndicatorNativeSelect";
+
+const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+});
+
+Group.displayName = "GroupNativeSelect";
+
+const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Label.displayName = "LabelNativeSelect";
+
+const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+  return (
+    <Component
+      role={decorative ? "presentation" : "separator"}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Separator.displayName = "SeparatorNativeSelect";
+
+const ScrollUpButton = ({ children }: ScrollUpButtonProps) => {
+  return <>{children}</>;
+};
+
+const ScrollDownButton = ({ children }: ScrollDownButtonProps) => {
+  return <>{children}</>;
+};
+
+const Viewport = ({ children }: ViewportProps) => {
+  return <>{children}</>;
+};
+
+export {
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Backdrop,
+  Portal,
+  Root,
+  ScrollDownButton,
+  ScrollUpButton,
+  Separator,
+  Trigger,
+  useItemContext,
+  useRootContext,
+  Value,
+  Viewport,
+};
+
+function onStartShouldSetResponder() {
+  return true;
+}