@brand-map/primitives 0.0.0-broken.0

package/src/select/select.web.tsx

@@ -0,0 +1,368 @@
+// import * as Select from "@radix-ui/react-select";
+// import * as React from "react";
+// import { Pressable, Text, View } from "react-native";
+
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// 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";
+
+// const SelectContext = React.createContext<
+//   | (SharedRootContext & {
+//       open: boolean;
+//       onOpenChange: (open: boolean) => void;
+//     })
+//   | null
+// >(null);
+
+// /**
+//  * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
+//  * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
+//  */
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   ({ render, value: valueProp, defaultValue, onValueChange: onValueChangeProp, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//     const [value, onValueChange] = useControllableState({
+//       prop: valueProp,
+//       defaultProp: defaultValue,
+//       onChange: onValueChangeProp,
+//     });
+//     const [open, setOpen] = React.useState(false);
+
+//     function onOpenChange(value: boolean) {
+//       setOpen(value);
+//       onOpenChangeProp?.(value);
+//     }
+
+//     function onStrValueChange(val: string) {
+//       onValueChange({ value: val, label: val });
+//     }
+
+//
+//     return (
+//       <SelectContext.Provider
+//         value={{
+//           value,
+//           onValueChange,
+//           open,
+//           onOpenChange,
+//         }}
+//       >
+//         <Select.Root
+//           value={value?.value}
+//           defaultValue={defaultValue?.value}
+//           onValueChange={onStrValueChange}
+//           open={open}
+//           onOpenChange={onOpenChange}
+//         >
+//           <Component
+//             ref={ref}
+//             {...viewProps}
+//           />
+//         </Select.Root>
+//       </SelectContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebSelect";
+
+// function useRootContext() {
+//   const context = React.useContext(SelectContext);
+//   if (!context) {
+//     throw new Error("Select compound components cannot be rendered outside the Select component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ role: _role, disabled, ...props }, ref) => {
+//   const { open, onOpenChange } = useRootContext();
+//   const augmentedRef = useAugmentedRef({
+//     ref,
+//     methods: {
+//       open() {
+//         onOpenChange(true);
+//       },
+//       close() {
+//         onOpenChange(false);
+//       },
+//     },
+//   });
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//       augRef.type = "button";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <Select.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         role="button"
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Select.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebSelect";
+
+// const Value = React.forwardRef<ValueRef, ValueProps>(({ placeholder, children, ...props }, ref) => {
+//   return (
+//     <Slot.Text
+//       ref={ref}
+//       {...props}
+//     >
+//       <Select.Value placeholder={placeholder}>{children}</Select.Value>
+//     </Slot.Text>
+//   );
+// });
+
+// Value.displayName = "ValueWebSelect";
+
+// function Portal({ container, children }: PortalProps) {
+//   return (
+//     <Select.Portal
+//       children={children}
+//       container={container}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, children, ...props }, ref) => {
+//   const { open } = useRootContext();
+
+//
+//   return (
+//     <>
+//       {open && (
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       )}
+//       {children as React.ReactNode}
+//     </>
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebSelect";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   (
+//     {
+//       render = false,
+//       keepMounted: _forceMount,
+//       align = "start",
+//       side = "bottom",
+//       position = "popper",
+//       sideOffset = 0,
+//       alignOffset = 0,
+//       avoidCollisions = true,
+//       disablePositioningStyle: _disablePositioningStyle,
+//       onCloseAutoFocus,
+//       onEscapeKeyDown,
+//       onInteractOutside: _onInteractOutside,
+//       onPointerDownOutside,
+//       ...props
+//     },
+//     ref,
+//   ) => {
+//
+//     return (
+//       <Select.Content
+//         onCloseAutoFocus={onCloseAutoFocus}
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onPointerDownOutside={onPointerDownOutside}
+//         align={align}
+//         side={side}
+//         sideOffset={sideOffset}
+//         alignOffset={alignOffset}
+//         avoidCollisions={avoidCollisions}
+//         position={position}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Select.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebSelect";
+
+// const ItemContext = React.createContext<{
+//   itemValue: string;
+//   label: string;
+// } | null>(null);
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ closeOnPress = true, label, value, children, ...props }, ref) => {
+//   return (
+//     <ItemContext.Provider value={{ itemValue: value, label: label }}>
+//       <Slot.Pressable
+//         ref={ref}
+//         {...props}
+//       >
+//         <Select.Item
+//           textValue={label}
+//           value={value}
+//           disabled={props.disabled ?? undefined}
+//         >
+//           <>{children as React.ReactNode}</>
+//         </Select.Item>
+//       </Slot.Pressable>
+//     </ItemContext.Provider>
+//   );
+// });
+
+// Item.displayName = "ItemWebSelect";
+
+// 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, Omit<ItemTextProps, "children">>(({ ...props }, ref) => {
+//   const { label } = useItemContext();
+
+//
+//   return (
+//     <Select.ItemText render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       >
+//         {label}
+//       </Component>
+//     </Select.ItemText>
+//   );
+// });
+
+// ItemText.displayName = "ItemTextWebSelect";
+
+// const ItemIndicator = React.forwardRef<ItemIndicatorRef, ItemIndicatorProps>(({ keepMounted: _forceMount, ...props }, ref) => {
+//
+//   return (
+//     <Select.ItemIndicator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Select.ItemIndicator>
+//   );
+// });
+
+// ItemIndicator.displayName = "ItemIndicatorWebSelect";
+
+// const Group = React.forwardRef<GroupRef, GroupProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Select.Group render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Select.Group>
+//   );
+// });
+
+// Group.displayName = "GroupWebSelect";
+
+// const Label = React.forwardRef<LabelRef, LabelProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Select.Label render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Select.Label>
+//   );
+// });
+
+// Label.displayName = "LabelWebSelect";
+
+// const Separator = React.forwardRef<SeparatorRef, SeparatorProps>(({ decorative, ...props }, ref) => {
+//
+//   return (
+//     <Select.Separator render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Select.Separator>
+//   );
+// });
+
+// Separator.displayName = "SeparatorWebSelect";
+
+// const ScrollUpButton = (props: ScrollUpButtonProps) => {
+//   return <Select.ScrollUpButton {...props} />;
+// };
+
+// const ScrollDownButton = (props: ScrollDownButtonProps) => {
+//   return <Select.ScrollDownButton {...props} />;
+// };
+
+// const Viewport = (props: ViewportProps) => {
+//   return <Select.Viewport {...props} />;
+// };
+
+// export {
+//   Content,
+//   Group,
+//   Item,
+//   ItemIndicator,
+//   ItemText,
+//   Label,
+//   Backdrop,
+//   Portal,
+//   Root,
+//   ScrollDownButton,
+//   ScrollUpButton,
+//   Separator,
+//   Trigger,
+//   useItemContext,
+//   useRootContext,
+//   Value,
+//   Viewport,
+// };

package/src/select/types.ts

@@ -0,0 +1,145 @@
+import type { KeepMountable, PositionedContentProps, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type Option =
+  | {
+      value: string;
+      label: string;
+    }
+  | undefined;
+
+interface SharedRootContext {
+  value: Option;
+  onValueChange: (option: Option) => void;
+  disabled?: boolean;
+}
+
+type RootProps = RenderViewProps & {
+  value?: Option;
+  defaultValue?: Option;
+  onValueChange?: (option: Option) => void;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  name?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  required?: boolean;
+};
+
+type ValueProps = RenderTextProps & {
+  placeholder: string;
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    closeOnPress?: boolean;
+  };
+
+type ContentProps = RenderViewProps &
+  PositionedContentProps & {
+    /**
+     * @platform: WEB ONLY
+     */
+    position?: "popper" | "item-aligned" | undefined;
+  };
+
+type ItemProps = RenderPressableProps & {
+  value: string;
+  label: string;
+  closeOnPress?: boolean;
+};
+
+type TriggerProps = RenderPressableProps;
+
+type ItemTextProps = Omit<RenderTextProps, "children">;
+type ItemIndicatorProps = RenderViewProps & KeepMountable;
+type GroupProps = RenderViewProps;
+type LabelProps = RenderTextProps;
+type SeparatorProps = RenderViewProps & {
+  decorative?: boolean;
+};
+
+/**
+ * @platform: WEB ONLY
+ */
+type ScrollUpButtonProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * @platform: WEB ONLY
+ */
+type ScrollDownButtonProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * @platform: WEB ONLY
+ */
+type ViewportProps = React.ComponentPropsWithoutRef<"div">;
+
+type ContentRef = ViewRef;
+type GroupRef = ViewRef;
+type IndicatorRef = ViewRef;
+type ItemRef = PressableRef;
+type ItemIndicatorRef = ViewRef;
+type ItemTextRef = TextRef;
+type LabelRef = TextRef;
+type BackdropRef = PressableRef;
+type RootRef = ViewRef;
+type SeparatorRef = ViewRef;
+type TriggerRef = PressableRef & {
+  open: () => void;
+  close: () => void;
+};
+type ValueRef = TextRef;
+
+export type {
+  ContentProps,
+  ContentRef,
+  GroupProps,
+  GroupRef,
+  IndicatorRef,
+  ItemIndicatorProps,
+  ItemIndicatorRef,
+  ItemProps,
+  ItemRef,
+  ItemTextProps,
+  ItemTextRef,
+  LabelProps,
+  LabelRef,
+  Option,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  ScrollDownButtonProps,
+  ScrollUpButtonProps,
+  SeparatorProps,
+  SeparatorRef,
+  SharedRootContext,
+  TriggerProps,
+  TriggerRef,
+  ValueProps,
+  ValueRef,
+  ViewportProps,
+};

package/src/separator/index.ts

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

package/src/separator/separator.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { View } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { RootProps, RootRef } from "./types";
+
+const Root = React.forwardRef<RootRef, RootProps>(({ decorative, orientation = "horizontal", ...props }, ref) => {
+  return (
+    <Component
+      role={decorative ? "presentation" : "separator"}
+      aria-orientation={orientation}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Root.displayName = "RootSeparator";
+
+export { Root };

package/src/separator/types.ts

@@ -0,0 +1,10 @@
+import type { RenderViewProps, ViewRef } from "../types";
+
+type RootProps = RenderViewProps & {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+};
+
+type RootRef = ViewRef;
+
+export type { RootProps, RootRef };

package/src/slider/index.ts

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

package/src/slider/slider.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { View } from "react-native";
+
+import * as Slot from "../slot";
+
+import type { RangeProps, RangeRef, RootProps, RootRef, ThumbProps, ThumbRef, TrackProps, TrackRef } from "./types";
+
+const RootContext = React.createContext<RootProps | null>(null);
+
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, value, disabled, min, max, dir: _dir, inverted: _inverted, step: _step, onValueChange: _onValueChange, ...props }, ref) => {
+    return (
+      <RootContext.Provider value={{ value, disabled, min, max }}>
+        <Component
+          ref={ref}
+          role="group"
+          {...props}
+        />
+      </RootContext.Provider>
+    );
+  },
+);
+
+Root.displayName = "RootNativeSlider";
+
+function useSliderContext() {
+  const context = React.useContext(RootContext);
+  if (context === null) {
+    throw new Error("Slider compound components cannot be rendered outside the Slider component");
+  }
+  return context;
+}
+
+const Track = React.forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
+  const { value, min, max, disabled } = useSliderContext();
+
+  return (
+    <Component
+      ref={ref}
+      aria-disabled={disabled}
+      role="slider"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      accessibilityValue={{ max, min, now: value }}
+      {...props}
+    />
+  );
+});
+
+Track.displayName = "TrackNativeSlider";
+
+const Range = React.forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      ref={ref}
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+Range.displayName = "RangeNativeSlider";
+
+const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+  return (
+    <Component
+      accessibilityRole="adjustable"
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Thumb.displayName = "ThumbNativeSlider";
+
+export { Range, Root, Thumb, Track };

package/src/slider/slider.web.tsx

@@ -0,0 +1,75 @@
+// import * as Slider from "@radix-ui/react-slider";
+// import * as React from "react";
+// import { View } from "react-native";
+
+// import * as Slot from "../slot";
+
+// import type { RangeProps, RangeRef, RootProps, RootRef, ThumbProps, ThumbRef, TrackProps, TrackRef } from "./types";
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ value, disabled, min, max, dir, inverted, step = 1, onValueChange, ...props }, ref) => {
+//
+//   return (
+//     <Slider.Root
+//       dir={dir}
+//       inverted={inverted}
+//       value={[value]}
+//       disabled={disabled}
+//       min={min}
+//       max={max}
+//       step={step}
+//       onValueChange={onValueChange}
+//       render
+//     >
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Slider.Root>
+//   );
+// });
+
+// Root.displayName = "RootWebSlider";
+
+// const Track = React.forwardRef<TrackRef, TrackProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Slider.Track render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Slider.Track>
+//   );
+// });
+
+// Track.displayName = "TrackWebSlider";
+
+// const Range = React.forwardRef<RangeRef, RangeProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Slider.Range render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Slider.Range>
+//   );
+// });
+
+// Range.displayName = "RangeWebSlider";
+
+// const Thumb = React.forwardRef<ThumbRef, ThumbProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Slider.Thumb render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Slider.Thumb>
+//   );
+// });
+
+// Thumb.displayName = "ThumbWebSlider";
+
+// export { Range, Root, Thumb, Track };