@brand-map/primitives 0.0.0-broken.0

package/mise.toml

@@ -0,0 +1,3 @@
+[tools]
+bun = "1.3.6"
+node = "24"

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@brand-map/primitives",
+  "version": "0.0.0-broken.0",
+  "exports": {
+    "./accordion": "./src/accordion/index.ts",
+    "./alert-dialog": "./src/alert-dialog/index.ts",
+    "./aspect-ratio": "./src/aspect-ratio/index.ts",
+    "./avatar": "./src/avatar/index.ts",
+    "./checkbox": "./src/checkbox/index.ts",
+    "./collapsible": "./src/collapsible/index.ts",
+    "./context-menu": "./src/context-menu/index.ts",
+    "./dialog": "./src/dialog/index.ts",
+    "./dropdown-menu": "./src/dropdown-menu/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./hover-card": "./src/hover-card/index.ts",
+    "./label": "./src/label/index.ts",
+    "./menubar": "./src/menubar/index.ts",
+    "./navigation-menu": "./src/navigation-menu/index.ts",
+    "./popover": "./src/popover/index.ts",
+    "./portal": "./src/portal/index.ts",
+    "./progress": "./src/progress/index.ts",
+    "./radio-group": "./src/radio-group/index.ts",
+    "./select": "./src/select/index.ts",
+    "./separator": "./src/separator/index.ts",
+    "./slider": "./src/slider/index.ts",
+    "./slot": "./src/slot/index.ts",
+    "./switch": "./src/switch/index.ts",
+    "./table": "./src/table/index.ts",
+    "./tabs": "./src/tabs/index.ts",
+    "./toast": "./src/toast/index.ts",
+    "./toggle": "./src/toggle/index.ts",
+    "./toggle-group": "./src/toggle-group/index.ts",
+    "./toolbar": "./src/toolbar/index.ts",
+    "./tooltip": "./src/tooltip/index.ts",
+    "./types": "./src/types/index.ts",
+    "./utils": "./src/utils/index.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "version-bump": "npx changeset && npx changeset version"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-native": "^0.83.1",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@tsconfig/react-native": "^3.0.9",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.10",
+    "oxfmt": "^0.27.0",
+    "oxlint": "^1.42.0",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  }
+}

package/src/accordion/accordion.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import { type GestureResponderEvent } from "react-native";
+
+import { useControllableState } from "../hooks";
+import * as Slot from "../slot";
+
+import type { ContentProps, ContentRef, HeaderProps, HeaderRef, ItemProps, ItemRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+const AccordionContext = React.createContext<RootContext | null>(null);
+
+/**
+ * @xample
+ * ```tsx
+ * <Root
+ *   multiple
+ *   onValueChange={(val) => {}}
+ *   value={["some"]}
+ *   render={(props, state) => <>{state.multiple ? <>multiple</> : <>single</>}</>}
+ * >
+ *  ...
+ * </Root>
+ */
+const Root = React.forwardRef<RootRef, RootProps>(
+  ({ render, multiple = false, disabled = false, collapsible = true, value: valueProp, onValueChange: onValueChangeProps, defaultValue, ...props }, ref) => {
+    const [value = [], onValueChange] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue ?? [],
+      onChange: onValueChangeProps,
+    });
+
+    return (
+      <AccordionContext.Provider
+        value={{
+          multiple,
+          disabled,
+          collapsible,
+          value,
+          onValueChange,
+        }}
+      >
+        {typeof render === "function" ? (
+          <>{render(props, { disabled: disabled, multiple, value })}</>
+        ) : (
+          <Slot.View
+            ref={ref}
+            render={render}
+            {...props}
+          />
+        )}
+      </AccordionContext.Provider>
+    );
+  },
+);
+Root.displayName = "RootNativeAccordion";
+
+function useRootContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion compound components cannot be rendered outside the Accordion component");
+  }
+  return context;
+}
+
+const AccordionItemContext = React.createContext<(ItemProps & { nativeID: string; open: boolean }) | null>(null);
+
+const Item = React.forwardRef<ItemRef, ItemProps>(({ render, value, disabled, ...props }, ref) => {
+  const { value: rootValue } = useRootContext();
+  const nativeID = React.useId();
+  const open = isItemExpanded(rootValue, value);
+
+  return (
+    <AccordionItemContext.Provider value={{ value, disabled, nativeID, open }}>
+      {typeof render === "function" ? (
+        <>{render(props, { open })}</>
+      ) : (
+        <Slot.View
+          ref={ref}
+          {...props}
+        />
+      )}
+    </AccordionItemContext.Provider>
+  );
+});
+Item.displayName = "ItemNativeAccordion";
+
+function useItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("AccordionItem compound components cannot be rendered outside the AccordionItem component");
+  }
+  return context;
+}
+
+const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+  const { disabled: rootDisabled } = useRootContext();
+  const { disabled: itemDisabled, open } = useItemContext();
+
+  return (
+    <Slot.View
+      ref={ref}
+      role="heading"
+      aria-expanded={open}
+      aria-disabled={rootDisabled ?? itemDisabled}
+      {...props}
+    />
+  );
+});
+Header.displayName = "HeaderNativeAccordion";
+
+const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ render, onPress: onPressProp, disabled: disabledProp, ...props }, ref) => {
+  const { disabled: rootDisabled, multiple, onValueChange, value: rootValue, collapsible } = useRootContext();
+  const { nativeID, disabled: itemDisabled, value, open } = useItemContext();
+
+  function onPress(event: GestureResponderEvent) {
+    if (rootDisabled || itemDisabled) return;
+
+    if (!multiple) {
+      const newValue = collapsible ? (rootValue.includes(value) ? ([] as string[]) : [value]) : [value];
+      onValueChange?.(newValue);
+    }
+
+    if (multiple) {
+      const rootToArray = toStringArray(rootValue);
+      const newValue = collapsible
+        ? rootToArray.includes(value)
+          ? rootToArray.filter((val) => val !== value)
+          : rootToArray.concat(value)
+        : Array.from(new Set(rootToArray.concat(value)));
+      onValueChange(newValue);
+    }
+
+    onPressProp?.(event);
+  }
+
+  const isDisabled = disabledProp || rootDisabled || itemDisabled;
+
+  if (typeof render === "function") {
+    return render(props, { open: isItemExpanded(rootValue, value) });
+  }
+
+  return (
+    <Slot.Pressable
+      ref={ref}
+      nativeID={nativeID}
+      aria-disabled={isDisabled}
+      role="button"
+      onPress={onPress}
+      accessibilityState={{
+        expanded: open,
+        disabled: isDisabled,
+      }}
+      disabled={isDisabled}
+      {...props}
+    />
+  );
+});
+Trigger.displayName = "TriggerNativeAccordion";
+
+const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+  const { multiple } = useRootContext();
+  const { nativeID, open } = useItemContext();
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  return (
+    <Slot.View
+      ref={ref}
+      aria-hidden={!(keepMounted || open)}
+      aria-labelledby={nativeID}
+      role={!multiple ? "region" : "summary"}
+      {...props}
+    />
+  );
+});
+Content.displayName = "ContentNativeAccordion";
+
+export { Content, Header, Item, Root, Trigger, useItemContext, useRootContext };
+
+function toStringArray(value?: string | string[]) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
+
+function isItemExpanded(rootValue: string | string[] | undefined, value: string) {
+  return Array.isArray(rootValue) ? rootValue.includes(value) : rootValue === value;
+}

package/src/accordion/accordion.web.tsx

@@ -0,0 +1,282 @@
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+// import * as Accordion from "@radix-ui/react-accordion";
+// import * as React from "react";
+// import { Pressable, View } from "react-native";
+
+// import type { ContentProps, ContentRef, HeaderProps, HeaderRef, ItemProps, ItemRef, RootProps, RootRef, TriggerProps, TriggerRef } from "./types";
+
+// const AccordionContext = React.createContext<RootProps | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(
+//   (
+//     { render, value: valueProp, onValueChange: onValueChangeProps, defaultValue, type, disabled, dir, orientation = "vertical", collapsible, ...props },
+//     ref,
+//   ) => {
+//     const [value = type === "multiple" ? [] : undefined, onValueChange] = useControllableState<(string | undefined) | string[]>({
+//       prop: valueProp,
+//       defaultProp: defaultValue,
+//       onChange: onValueChangeProps as (state: string | string[] | undefined) => void,
+//     });
+
+//
+//     return (
+//       <AccordionContext.Provider
+//         value={
+//           {
+//             value,
+//             onValueChange,
+//             type,
+//             disabled,
+//             dir,
+//             orientation,
+//           } as RootProps
+//         }
+//       >
+//         <Accordion.Root
+//           render
+//           value={value as any}
+//           onValueChange={onValueChange as any}
+//           type={type as any}
+//           disabled={disabled}
+//           dir={dir}
+//           orientation={orientation}
+//           collapsible={collapsible}
+//         >
+//           <Component
+//             ref={ref}
+//             {...props}
+//           />
+//         </Accordion.Root>
+//       </AccordionContext.Provider>
+//     );
+//   },
+// );
+
+// Root.displayName = "RootWebAccordion";
+
+// function useRootContext() {
+//   const context = React.useContext(AccordionContext);
+//   if (!context) {
+//     throw new Error("Accordion compound components cannot be rendered outside the Accordion component");
+//   }
+//   return context;
+// }
+
+// const AccordionItemContext = React.createContext<(ItemProps & { isExpanded: boolean }) | null>(null);
+
+// const Item = React.forwardRef<ItemRef, ItemProps>(({ value: itemValue, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { value, orientation, disabled: disabledRoot } = useRootContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       const isExpanded = Array.isArray(value) ? value.includes(itemValue) : value === itemValue;
+//       augRef.dataset.state = isExpanded ? "open" : "closed";
+//     }
+//   }, [value, itemValue]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.orientation = orientation;
+//       if (disabled || disabledRoot) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [orientation, disabled, disabledRoot]);
+
+//
+//   return (
+//     <AccordionItemContext.Provider
+//       value={{
+//         value: itemValue,
+//         disabled,
+//         isExpanded: isItemExpanded(value, itemValue),
+//       }}
+//     >
+//       <Accordion.Item
+//         value={itemValue}
+//         disabled={disabled}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           {...props}
+//         />
+//       </Accordion.Item>
+//     </AccordionItemContext.Provider>
+//   );
+// });
+
+// Item.displayName = "ItemWebAccordion";
+
+// function useItemContext() {
+//   const context = React.useContext(AccordionItemContext);
+//   if (!context) {
+//     throw new Error("AccordionItem compound components cannot be rendered outside the AccordionItem component");
+//   }
+//   return context;
+// }
+
+// const Header = React.forwardRef<HeaderRef, HeaderProps>(({ ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { disabled, isExpanded } = useItemContext();
+//   const { orientation, disabled: disabledRoot } = useRootContext();
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = isExpanded ? "open" : "closed";
+//     }
+//   }, [isExpanded]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.orientation = orientation;
+//       if (disabled || disabledRoot) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [orientation, disabled, disabledRoot]);
+
+//
+//   return (
+//     <Accordion.Header render>
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </Accordion.Header>
+//   );
+// });
+
+// Header.displayName = "HeaderWebAccordion";
+
+// const HIDDEN_STYLE: React.CSSProperties = {
+//   position: "absolute",
+//   top: 0,
+//   left: 0,
+//   zIndex: -999999,
+//   opacity: 0,
+// };
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ disabled: disabledProp, ...props }, ref) => {
+//   const { disabled: disabledRoot } = useRootContext();
+//   const { disabled, isExpanded } = useItemContext();
+//   const triggerRef = React.useRef<HTMLButtonElement>(null);
+//   const augmentedRef = useAugmentedRef({ ref });
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+
+//       augRef.dataset.state = isExpanded ? "expanded" : "closed";
+//     }
+//   }, [isExpanded]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+
+//       if (disabled || disabledRoot || disabledProp) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [disabled, disabledRoot, disabledProp]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (triggerRef.current) {
+//       triggerRef.current.disabled = true;
+//     }
+//   }, []);
+
+//   const isDisabled = disabledProp ?? disabledRoot ?? disabled;
+//
+//   return (
+//     <>
+//       <Accordion.Trigger
+//         ref={triggerRef}
+//         aria-hidden
+//         tabIndex={-1}
+//         style={HIDDEN_STYLE}
+//       />
+//       <Accordion.Trigger
+//         disabled={isDisabled}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           role="button"
+//           disabled={isDisabled}
+//           {...props}
+//           onPress={(ev) => {
+//             if (triggerRef.current && !isDisabled) {
+//               triggerRef.current.disabled = false;
+//               triggerRef.current.click();
+//               triggerRef.current.disabled = true;
+//             }
+//             props.onPress?.(ev);
+//           }}
+//         />
+//       </Accordion.Trigger>
+//     </>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebAccordion";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+
+//   const { orientation, disabled: disabledRoot } = useRootContext();
+//   const { disabled, isExpanded } = useItemContext();
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.state = isExpanded ? "expanded" : "closed";
+//     }
+//   }, [isExpanded]);
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLDivElement;
+//       augRef.dataset.orientation = orientation;
+
+//       if (disabled || disabledRoot) {
+//         augRef.dataset.disabled = "true";
+//       } else {
+//         augRef.dataset.disabled = undefined;
+//       }
+//     }
+//   }, [orientation, disabled, disabledRoot]);
+
+//
+//   return (
+//     <Accordion.Content
+//       keepMounted={keepMounted}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         {...props}
+//       />
+//     </Accordion.Content>
+//   );
+// });
+
+// Content.displayName = "ContentWebAccordion";
+
+// export { Content, Header, Item, Root, Trigger, useItemContext, useRootContext };
+
+// function isItemExpanded(rootValue: string | string[] | undefined, value: string) {
+//   return Array.isArray(rootValue) ? rootValue.includes(value) : rootValue === value;
+// }

package/src/accordion/index.ts

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

package/src/accordion/types.ts

@@ -0,0 +1,44 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderViewProps, ViewRef } from "../types";
+
+type Root = {
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+
+  multiple?: boolean | undefined;
+  defaultValue?: string[];
+};
+
+type RootContext = Omit<Root, "value"> & {
+  value: string[];
+  onValueChange: (value: string[]) => void;
+
+  collapsible: boolean;
+  disabled: boolean;
+};
+
+type RootRef = ViewRef;
+type ItemRef = ViewRef;
+type ContentRef = ViewRef;
+type HeaderRef = ViewRef;
+type TriggerRef = PressableRef;
+
+type RootProps = (Root & RenderViewProps<Required<Pick<Root, "multiple" | "value"> & Pick<RootContext, "disabled">>>) & {
+  disabled?: boolean;
+  collapsible?: boolean;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * @platform: WEB ONLY
+   */
+  orientation?: "vertical" | "horizontal";
+};
+type ItemProps = RenderViewProps<{ open: boolean }> & { value: string; disabled?: boolean };
+type ContentProps = KeepMountable & RenderViewProps;
+type HeaderProps = RenderViewProps;
+type TriggerProps = RenderPressableProps<{ open: boolean }>;
+
+export type { ContentProps, ContentRef, HeaderProps, HeaderRef, ItemProps, ItemRef, RootContext, RootProps, RootRef, TriggerProps, TriggerRef };