@brand-map/primitives 0.0.0-broken.0

package/src/tabs/tabs.web.tsx

@@ -0,0 +1,106 @@
+// import * as Tabs from "@radix-ui/react-tabs";
+// import * as React from "react";
+// import { Pressable, View } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { ContentProps, ContentRef, ListProps, ListRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+// const TabsContext = React.createContext<RootProps | null>(null);
+// const Root = React.forwardRef<RootRef, RootProps>(({ value, onValueChange, orientation, dir, activationMode, ...viewProps }, ref) => {
+//
+//   return (
+//     <TabsContext.Provider
+//       value={{
+//         value,
+//         onValueChange,
+//       }}
+//     >
+//       <Tabs.Root
+//         value={value}
+//         onValueChange={onValueChange}
+//         orientation={orientation}
+//         dir={dir}
+//         activationMode={activationMode}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </Tabs.Root>
+//     </TabsContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebTabs";
+
+// 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 (
+//     <Tabs.List render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Tabs.List>
+//   );
+// });
+
+// List.displayName = "ListWebTabs";
+
+// const TriggerContext = React.createContext<{ value: string } | null>(null);
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ value: tabValue, ...props }, ref) => {
+//
+//   return (
+//     <TriggerContext.Provider value={{ value: tabValue }}>
+//       <Tabs.Trigger
+//         value={tabValue}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Tabs.Trigger>
+//     </TriggerContext.Provider>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebTabs";
+
+// 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, tabIndex = -1, ...props }, ref) => {
+//
+//   return (
+//     <Tabs.Content
+//       value={value}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//         tabIndex={tabIndex}
+//       />
+//     </Tabs.Content>
+//   );
+// });
+
+// Content.displayName = "ContentWebTabs";
+
+// export { Content, List, Root, Trigger, useRootContext, useTriggerContext };

package/src/tabs/types.ts

@@ -0,0 +1,37 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  value: string;
+  onValueChange: (value: string) => void;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  activationMode?: "automatic" | "manual";
+};
+
+type ListProps = RenderViewProps;
+type TriggerProps = RenderPressableProps & {
+  value: string;
+};
+type ContentProps = RenderViewProps &
+  KeepMountable & {
+    value: string;
+  };
+
+type RootRef = ViewRef;
+type ListRef = ViewRef;
+type TriggerRef = PressableRef;
+type ContentRef = ViewRef;
+
+export type { ContentProps, ContentRef, ListProps, ListRef, RootProps, RootRef, TriggerProps, TriggerRef };

package/src/toast/index.ts

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

package/src/toast/toast.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { Pressable, Text, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { ActionProps, ActionRef, CloseProps, CloseRef, DescriptionProps, DescriptionRef, RootProps, RootRef, TitleProps, TitleRef } from "./types";
+
+interface RootContext extends RootProps {
+  nativeID: string;
+}
+const ToastContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(({ type = "foreground", open, onOpenChange, ...viewProps }, ref) => {
+  const nativeID = React.useId();
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <ToastContext.Provider
+      value={{
+        open,
+        onOpenChange,
+        type,
+        nativeID,
+      }}
+    >
+      <Component
+        ref={ref}
+        role="status"
+        aria-live={type === "foreground" ? "assertive" : "polite"}
+        {...viewProps}
+      />
+    </ToastContext.Provider>
+  );
+});
+
+Root.displayName = "RootToast";
+
+function useToastContext() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error("Toast compound components cannot be rendered outside the Toast component");
+  }
+  return context;
+}
+
+const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange } = useToastContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onOpenChange(false);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Close.displayName = "CloseToast";
+
+const Action = React.forwardRef<ActionRef, ActionProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange } = useToastContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    onOpenChange(false);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Action.displayName = "ActionToast";
+
+const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+  const { nativeID } = useToastContext();
+
+  return (
+    <Component
+      ref={ref}
+      role="heading"
+      nativeID={`${nativeID}_label`}
+      {...props}
+    />
+  );
+});
+
+Title.displayName = "TitleToast";
+
+const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+  const { nativeID } = useToastContext();
+
+  return (
+    <Component
+      ref={ref}
+      nativeID={`${nativeID}_desc`}
+      {...props}
+    />
+  );
+});
+
+Description.displayName = "DescriptionToast";
+
+export { Action, Close, Description, Root, Title };

package/src/toast/types.ts

@@ -0,0 +1,20 @@
+import type { PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  type?: "foreground" | "background";
+};
+
+type CloseProps = RenderPressableProps;
+type ActionProps = RenderPressableProps;
+type TitleProps = RenderTextProps;
+type DescriptionProps = RenderTextProps;
+
+type RootRef = ViewRef;
+type CloseRef = PressableRef;
+type ActionRef = PressableRef;
+type TitleRef = TextRef;
+type DescriptionRef = TextRef;
+
+export type { ActionProps, ActionRef, CloseProps, CloseRef, DescriptionProps, DescriptionRef, RootProps, RootRef, TitleProps, TitleRef };

package/src/toggle/index.ts

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

package/src/toggle/toggle.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Pressable, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { RootProps, RootRef } from "./types";
+
+const Root = React.forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    const newValue = !pressed;
+    onPressedChange(newValue);
+    onPressProp?.(ev);
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled}
+      role="switch"
+      aria-selected={pressed}
+      onPress={onPress}
+      accessibilityState={{
+        selected: pressed,
+        disabled,
+      }}
+      disabled={disabled}
+      {...props}
+    />
+  );
+});
+
+Root.displayName = "RootNativeToggle";
+
+export { Root };

package/src/toggle/toggle.web.tsx

@@ -0,0 +1,36 @@
+// import * as Toggle from "@radix-ui/react-toggle";
+// import * as React from "react";
+// import { Pressable, type GestureResponderEvent } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { RootProps, RootRef } from "./types";
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ pressed, onPressedChange, disabled, onPress: onPressProp, ...props }, ref) => {
+//   function onPress(ev: GestureResponderEvent) {
+//     onPressProp?.(ev);
+//     onPressedChange(!pressed);
+//   }
+
+//
+//   return (
+//     <Toggle.Root
+//       pressed={pressed}
+//       onPressedChange={onPressedChange}
+//       disabled={disabled}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         onPress={onPress}
+//         disabled={disabled}
+//         role="button"
+//         {...props}
+//       />
+//     </Toggle.Root>
+//   );
+// });
+
+// Root.displayName = "RootWebToggle";
+
+// export { Root };

package/src/toggle/types.ts

@@ -0,0 +1,11 @@
+import type { PressableRef, RenderPressableProps } from "../types";
+
+type RootProps = RenderPressableProps & {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  disabled?: boolean;
+};
+
+type RootRef = PressableRef;
+
+export type { RootProps, RootRef };

package/src/toggle-group/index.ts

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

package/src/toggle-group/toggle-group.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+import * as Slot from "../slot";
+import { ToggleGroupUtils } from "../utils";
+
+import type { ItemProps, ItemRef, RootProps, RootRef } from "./types";
+
+const ToggleGroupContext = React.createContext<RootProps | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  (
+    { render, type, value, onValueChange, disabled = false, rovingFocus: _rovingFocus, orientation: _orientation, dir: _dir, loop: _loop, ...viewProps },
+    ref,
+  ) => {
+    return (
+      <ToggleGroupContext.Provider
+        value={
+          {
+            type,
+            value,
+            disabled,
+            onValueChange,
+          } as RootProps
+        }
+      >
+        <Component
+          ref={ref}
+          role="group"
+          {...viewProps}
+        />
+      </ToggleGroupContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootToggleGroup";
+
+function useRootContext() {
+  const context = React.useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
+  }
+  return context;
+}
+
+const ItemContext = React.createContext<ItemProps | null>(null);
+
+const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+  // const id = React.useId();
+  const { type, disabled, value, onValueChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled || disabledProp) return;
+    if (type === "single") {
+      onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
+    }
+    if (type === "multiple") {
+      onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
+    }
+    onPressProp?.(ev);
+  }
+
+  const isChecked = type === "single" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+  const isSelected = type === "multiple" ? ToggleGroupUtils.getIsSelected(value, itemValue) : undefined;
+
+  return (
+    <ItemContext.Provider value={{ value: itemValue }}>
+      <Component
+        ref={ref}
+        aria-disabled={disabled}
+        role={type === "single" ? "radio" : "checkbox"}
+        onPress={onPress}
+        aria-checked={isChecked}
+        aria-selected={isSelected}
+        disabled={(disabled || disabledProp) ?? false}
+        accessibilityState={{
+          disabled: (disabled || disabledProp) ?? false,
+          checked: isChecked,
+          selected: isSelected,
+        }}
+        {...props}
+      />
+    </ItemContext.Provider>
+  );
+});
+
+Item.displayName = "ItemToggleGroup";
+
+function useItemContext() {
+  const context = React.useContext(ItemContext);
+  if (!context) {
+    throw new Error("ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component");
+  }
+  return context;
+}
+
+const utils = ToggleGroupUtils;
+
+export { Item, Root, useItemContext, useRootContext, utils };

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

@@ -0,0 +1,103 @@
+// import * as ToggleGroup from "@radix-ui/react-toggle-group";
+// import * as React from "react";
+// import { Pressable, View, type GestureResponderEvent } from "react-native";
+
+// import * as Slot from "../slot";
+// import { ToggleGroupUtils } from "../utils";
+
+// import type { ItemProps, ItemRef, RootProps, RootRef } from "./types";
+
+// const ToggleGroupContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   ({ render, type, value, onValueChange, disabled = false, rovingFocus, orientation, dir, loop, ...viewProps }, ref) => {
+//
+//     return (
+//       <ToggleGroupContext.Provider
+//         value={
+//           {
+//             type,
+//             value,
+//             disabled,
+//             onValueChange,
+//           } as RootProps
+//         }
+//       >
+//         <ToggleGroup.Root
+//           type={type as any}
+//           value={value as any}
+//           onValueChange={onValueChange as any}
+//           disabled={disabled}
+//           rovingFocus={rovingFocus}
+//           orientation={orientation}
+//           dir={dir}
+//           loop={loop}
+//           render
+//         >
+//           <Component
+//             ref={ref}
+//             {...viewProps}
+//           />
+//         </ToggleGroup.Root>
+//       </ToggleGroupContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootToggleGroup";
+
+// function useRootContext() {
+//   const context = React.useContext(ToggleGroupContext);
+//   if (!context) {
+//     throw new Error("ToggleGroup compound components cannot be rendered outside the ToggleGroup component");
+//   }
+//   return context;
+// }
+
+// const ItemContext = React.createContext<ItemProps | null>(null);
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled: disabledProp = false, onPress: onPressProp, ...props }, ref) => {
+//   const { type, disabled, value, onValueChange } = useRootContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     onPressProp?.(ev);
+//     if (type === "single") {
+//       onValueChange(ToggleGroupUtils.getNewSingleValue(value, itemValue));
+//     }
+//     if (type === "multiple") {
+//       onValueChange(ToggleGroupUtils.getNewMultipleValue(value, itemValue));
+//     }
+//   }
+
+//
+//   return (
+//     <ItemContext.Provider value={{ value: itemValue }}>
+//       <ToggleGroup.Item
+//         value={itemValue}
+//         render
+//       >
+//         <Component
+//           ref={ref}
+//           onPress={onPress}
+//           disabled={disabled || disabledProp}
+//           role="button"
+//           {...props}
+//         />
+//       </ToggleGroup.Item>
+//     </ItemContext.Provider>
+//   );
+// });
+
+// Item.displayName = "ItemToggleGroup";
+
+// function useItemContext() {
+//   const context = React.useContext(ItemContext);
+//   if (!context) {
+//     throw new Error("ToggleGroupItem compound components cannot be rendered outside the ToggleGroupItem component");
+//   }
+//   return context;
+// }
+
+// const utils = ToggleGroupUtils;
+
+// export { Item, Root, useItemContext, useRootContext, utils };

package/src/toggle-group/types.ts

@@ -0,0 +1,46 @@
+import { PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type SingleRootProps = {
+  type: "single";
+  value: string | undefined;
+  onValueChange: (val: string | undefined) => void;
+};
+
+type MultipleRootProps = {
+  type: "multiple";
+  value: string[];
+  onValueChange: (val: string[]) => void;
+};
+
+type RootProps = (SingleRootProps | MultipleRootProps) & {
+  disabled?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  rovingFocus?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  loop?: boolean;
+} & RenderViewProps;
+
+type ItemProps = RenderPressableProps & {
+  value: string;
+};
+
+type RootRef = ViewRef;
+type ItemRef = PressableRef;
+
+export type { ItemProps, ItemRef, RootProps, RootRef };

package/src/toolbar/index.ts

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