@korsolutions/ui 0.0.18 → 0.0.20

package/src/components/button/button.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { ButtonPrimitive } from "@/primitives";
+import { ButtonPrimitive, ButtonPrimitiveRootProps } from "@/primitives";
 import { ButtonVariants } from "./variants";
 
 interface ButtonProps {
-  onPress?: () => void;
   children?: string;
+
+  onPress?: ButtonPrimitiveRootProps["onPress"];
+  onLayout?: ButtonPrimitiveRootProps["onLayout"];
   isDisabled?: boolean;
   isLoading?: boolean;
 
@@ -12,11 +14,12 @@ interface ButtonProps {
 }
 
 export function Button(props: ButtonProps) {
-  const useVariantStyles = props.variant ? ButtonVariants[props.variant] : ButtonVariants["default"];
+  const { children, variant = "default", ...rootProps } = props;
+  const useVariantStyles = ButtonVariants[variant];
   const variantStyles = useVariantStyles();
 
   return (
-    <ButtonPrimitive.Root onPress={props.onPress} isDisabled={props.isDisabled} isLoading={props.isLoading} styles={variantStyles}>
+    <ButtonPrimitive.Root {...rootProps} styles={variantStyles}>
       {props.isLoading && <ButtonPrimitive.Spinner />}
       <ButtonPrimitive.Label>{props.children}</ButtonPrimitive.Label>
     </ButtonPrimitive.Root>

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,49 @@
+import { DropdownMenuPrimitive } from "@/primitives";
+import React from "react";
+import { DropdownMenuVariants } from "./variants";
+import { PressableProps } from "react-native";
+
+type DropdownMenuOption =
+  | {
+      type: "button";
+      label: string;
+      onPress: () => void;
+    }
+  | {
+      type: "divider";
+    };
+
+interface DropdownMenuProps {
+  trigger: React.ReactElement<PressableProps>;
+  options: DropdownMenuOption[];
+
+  variant?: keyof typeof DropdownMenuVariants;
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  const useVariantStyles = DropdownMenuVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <DropdownMenuPrimitive.Root styles={styles}>
+      <DropdownMenuPrimitive.Trigger>{props.trigger}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Overlay>
+          <DropdownMenuPrimitive.Content>
+            {props.options.map((option) => {
+              if (option.type === "button") {
+                return (
+                  <DropdownMenuPrimitive.Button onPress={option.onPress} key={option.label}>
+                    {option.label}
+                  </DropdownMenuPrimitive.Button>
+                );
+              } else if (option.type === "divider") {
+                return <DropdownMenuPrimitive.Divider key={Math.random().toString()} />;
+              }
+            })}
+          </DropdownMenuPrimitive.Content>
+        </DropdownMenuPrimitive.Overlay>
+      </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
+  );
+}

package/src/components/dropdown-menu/variants/default.tsx

@@ -0,0 +1,40 @@
+import { DropdownMenuStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useDropdownMenuVariantDefault = (): DropdownMenuStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): DropdownMenuStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {
+        overflow: "hidden",
+        backgroundColor: colors.surface,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+      },
+      button: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          color: colors.foreground,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      divider: {
+        height: 1,
+        backgroundColor: colors.border,
+      },
+    })
+  );
+};

package/src/components/dropdown-menu/variants/index.ts

@@ -0,0 +1,5 @@
+import { useDropdownMenuVariantDefault } from "./default";
+
+export const DropdownMenuVariants = {
+  default: useDropdownMenuVariantDefault,
+};

package/src/components/index.ts

@@ -8,3 +8,7 @@ export * from "./link/link";
 export * from "./empty/empty";
 export * from "./avatar/avatar";
 export * from "./toast/index";
+export * from "./badge/badge";
+export * from "./textarea/textarea";
+export * from "./dropdown-menu/dropdown-menu";
+export * from "./popover/popover";

package/src/components/popover/popover.tsx

@@ -0,0 +1,51 @@
+import { PopoverPrimitive, usePopover } from "@/primitives";
+import React, { forwardRef } from "react";
+import { PopoverVariants } from "./variants";
+import type { PopoverTriggerRef } from "@/primitives";
+import { PressableProps } from "react-native";
+
+interface PopoverChildrenProps {
+  close: () => void;
+}
+
+export interface PopoverProps {
+  children: ((props: PopoverChildrenProps) => React.ReactNode) | React.ReactNode;
+  trigger: React.ReactElement<PressableProps>;
+  closeOnOverlayPress?: boolean;
+
+  variant?: keyof typeof PopoverVariants;
+}
+
+const PopoverContentComponent = (props: { children: PopoverProps["children"] }) => {
+  const popover = usePopover();
+  if (typeof props.children === "function") {
+    return (
+      <PopoverPrimitive.Content>
+        {props.children({
+          close: () => popover.setIsOpen(false),
+        })}
+      </PopoverPrimitive.Content>
+    );
+  }
+  return <PopoverPrimitive.Content>{props.children}</PopoverPrimitive.Content>;
+};
+
+const PopoverComponent = forwardRef<PopoverTriggerRef, PopoverProps>((props, ref) => {
+  const useVariantStyles = PopoverVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <PopoverPrimitive.Root styles={styles}>
+      <PopoverPrimitive.Trigger ref={ref}>{props.trigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Overlay closeOnPress={props.closeOnOverlayPress}>
+          <PopoverContentComponent>{props.children}</PopoverContentComponent>
+        </PopoverPrimitive.Overlay>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+});
+
+PopoverComponent.displayName = "Popover";
+
+export const Popover = PopoverComponent;

package/src/components/popover/variants/default.tsx

@@ -0,0 +1,26 @@
+import { PopoverStyles } from "@/primitives/popover/types";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const usePopoverVariantDefault = (): PopoverStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): PopoverStyles => ({
+      overlay: {
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+      },
+      content: {
+        backgroundColor: colors.surface,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        padding: 16,
+        minWidth: 280,
+        maxWidth: 320,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+      },
+    })
+  );
+};

package/src/components/popover/variants/index.ts

@@ -0,0 +1,5 @@
+import { usePopoverVariantDefault } from "./default";
+
+export const PopoverVariants = {
+  default: usePopoverVariantDefault,
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { TextareaVariants } from "./variants";
+import { TextareaPrimitive, TextareaPrimitiveBaseProps } from "@/primitives";
+
+interface TextareaProps extends TextareaPrimitiveBaseProps {
+  variant?: keyof typeof TextareaVariants;
+}
+
+export function Textarea(props: TextareaProps) {
+  const useVariantStyles = TextareaVariants[props.variant ?? "default"];
+  const variantStyles = useVariantStyles();
+
+  return <TextareaPrimitive {...props} styles={variantStyles} />;
+}

package/src/components/textarea/variants/default.tsx

@@ -0,0 +1,38 @@
+import { TextareaStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useTextareaVariantDefault(): TextareaStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): TextareaStyles => ({
+      default: {
+        placeholderTextColor: colors.mutedForeground,
+        selectionColor: colors.primary,
+        style: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          outlineWidth: 0,
+          fontFamily,
+          fontSize,
+          minHeight: 120,
+          textAlignVertical: "top",
+          color: colors.foreground,
+        },
+      },
+      focused: {
+        style: {
+          borderColor: colors.primary,
+        },
+      },
+      disabled: {
+        style: {
+          color: colors.mutedForeground,
+          backgroundColor: colors.muted,
+        },
+      },
+    })
+  );
+}

package/src/components/textarea/variants/index.ts

@@ -0,0 +1,5 @@
+import { useTextareaVariantDefault } from "./default";
+
+export const TextareaVariants = {
+  default: useTextareaVariantDefault,
+};

package/src/hooks/useRelativePosition.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+import { useWindowDimensions, type LayoutRectangle, type ScaledSize } from "react-native";
+
+interface Insets {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "triggerPosition" | "contentLayout" | "dimensions"> & {
+  triggerPosition: LayoutPosition | null;
+  contentLayout: LayoutRectangle | null;
+};
+
+export function useRelativePosition({
+  align,
+  avoidCollisions,
+  triggerPosition,
+  contentLayout,
+  alignOffset,
+  insets,
+  sideOffset,
+  side,
+}: UseRelativePositionArgs) {
+  const dimensions = useWindowDimensions();
+
+  return React.useMemo(() => {
+    if (!triggerPosition || !contentLayout) {
+      return {
+        position: "absolute",
+        opacity: 0,
+        top: dimensions.height,
+        zIndex: -9999999,
+      } as const;
+    }
+    return getContentStyle({
+      align,
+      avoidCollisions,
+      contentLayout,
+      side,
+      triggerPosition,
+      alignOffset,
+      insets,
+      sideOffset,
+      dimensions,
+    });
+  }, [align, avoidCollisions, side, alignOffset, insets, triggerPosition, contentLayout, dimensions.width, dimensions.height]);
+}
+
+export interface LayoutPosition {
+  pageY: number;
+  pageX: number;
+  width: number;
+  height: number;
+}
+
+interface GetPositionArgs {
+  dimensions: ScaledSize;
+  avoidCollisions: boolean;
+  triggerPosition: LayoutPosition;
+  contentLayout: LayoutRectangle;
+  insets?: Insets;
+}
+
+interface GetSidePositionArgs extends GetPositionArgs {
+  side: "top" | "bottom";
+  sideOffset: number;
+}
+
+export const DEFAULT_LAYOUT: LayoutRectangle = { x: 0, y: 0, width: 0, height: 0 };
+export const DEFAULT_POSITION: LayoutPosition = { height: 0, width: 0, pageX: 0, pageY: 0 };
+
+function getSidePosition({ side, triggerPosition, contentLayout, sideOffset, insets, avoidCollisions, dimensions }: GetSidePositionArgs) {
+  const insetTop = insets?.top ?? 0;
+  const insetBottom = insets?.bottom ?? 0;
+  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
+
+  if (!avoidCollisions) {
+    return {
+      top: side === "top" ? positionTop : positionBottom,
+    };
+  }
+
+  if (side === "top") {
+    return {
+      top: Math.min(Math.max(insetTop, positionTop), dimensions.height - insetBottom - contentLayout.height),
+    };
+  }
+
+  return {
+    top: Math.min(dimensions.height - insetBottom - contentLayout.height, positionBottom),
+  };
+}
+
+interface GetAlignPositionArgs extends GetPositionArgs {
+  align: "start" | "center" | "end";
+  alignOffset: number;
+}
+
+function getAlignPosition({ align, avoidCollisions, contentLayout, triggerPosition, alignOffset, insets, dimensions }: GetAlignPositionArgs) {
+  const insetLeft = insets?.left ?? 0;
+  const insetRight = insets?.right ?? 0;
+  const maxContentWidth = dimensions.width - insetLeft - insetRight;
+
+  const contentWidth = Math.min(contentLayout.width, maxContentWidth);
+
+  let left = getLeftPosition(align, triggerPosition.pageX, triggerPosition.width, contentWidth, alignOffset, insetLeft, insetRight, dimensions);
+
+  if (avoidCollisions) {
+    const doesCollide = left < insetLeft || left + contentWidth > dimensions.width - insetRight;
+    if (doesCollide) {
+      const spaceLeft = left - insetLeft;
+      const spaceRight = dimensions.width - insetRight - (left + contentWidth);
+
+      if (spaceLeft > spaceRight && spaceLeft >= contentWidth) {
+        left = insetLeft;
+      } else if (spaceRight >= contentWidth) {
+        left = dimensions.width - insetRight - contentWidth;
+      } else {
+        const centeredPosition = Math.max(insetLeft, (dimensions.width - contentWidth - insetRight) / 2);
+        left = centeredPosition;
+      }
+    }
+  }
+
+  return { left, maxWidth: maxContentWidth };
+}
+
+function getLeftPosition(
+  align: "start" | "center" | "end",
+  triggerPageX: number,
+  triggerWidth: number,
+  contentWidth: number,
+  alignOffset: number,
+  insetLeft: number,
+  insetRight: number,
+  dimensions: ScaledSize
+) {
+  let left = 0;
+  if (align === "start") {
+    left = triggerPageX;
+  }
+  if (align === "center") {
+    left = triggerPageX + triggerWidth / 2 - contentWidth / 2;
+  }
+  if (align === "end") {
+    left = triggerPageX + triggerWidth - contentWidth;
+  }
+  return Math.max(insetLeft, Math.min(left + alignOffset, dimensions.width - contentWidth - insetRight));
+}
+
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
+
+function getContentStyle({
+  align,
+  avoidCollisions,
+  contentLayout,
+  side,
+  triggerPosition,
+  alignOffset,
+  insets,
+  sideOffset,
+  dimensions,
+}: GetContentStyleArgs) {
+  return Object.assign(
+    { position: "absolute" } as const,
+    getSidePosition({
+      side,
+      triggerPosition,
+      contentLayout,
+      sideOffset,
+      insets,
+      avoidCollisions,
+      dimensions,
+    }),
+    getAlignPosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      dimensions,
+    })
+  );
+}

package/src/primitives/badge/badge-label.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useBadge } from "./context";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+
+export interface BadgeLabelProps {
+  children?: string;
+
+  render?: (props: BadgeLabelProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function BadgeLabel(props: BadgeLabelProps) {
+  const badge = useBadge();
+
+  const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/primitives/badge/badge-root.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { BadgeStyles } from "./types";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { BadgeContext } from "./context";
+
+export interface BadgeRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: BadgeRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: BadgeStyles;
+}
+
+export function BadgeRoot(props: BadgeRootProps) {
+  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <BadgeContext.Provider
+      value={{
+        state: "default",
+        styles: props.styles,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </BadgeContext.Provider>
+  );
+}

package/src/primitives/badge/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { BadgeState, BadgeStyles } from "./types";
+
+export interface BadgeContext {
+  state: BadgeState;
+  styles?: BadgeStyles;
+}
+
+export const BadgeContext = createContext<BadgeContext | undefined>(undefined);
+
+export const useBadge = () => {
+  const context = useContext(BadgeContext);
+  if (!context) {
+    throw new Error("useBadge must be used within a BadgeProvider");
+  }
+  return context;
+};

package/src/primitives/badge/index.ts

@@ -0,0 +1,11 @@
+import { BadgeRoot } from "./badge-root";
+import { BadgeLabel } from "./badge-label";
+
+export const BadgePrimitive = {
+  Root: BadgeRoot,
+  Label: BadgeLabel,
+};
+
+export type { BadgeRootProps } from "./badge-root";
+export type { BadgeLabelProps } from "./badge-label";
+export type { BadgeStyles } from "./types";

package/src/primitives/badge/types.ts

@@ -0,0 +1,9 @@
+import { BadgeRootProps } from "./badge-root";
+import { BadgeLabelProps } from "./badge-label";
+
+export type BadgeState = "default";
+
+export interface BadgeStyles {
+  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
+  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
+}

package/src/primitives/button/button-root.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from "react";
-import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
 import { ButtonPrimitiveContext } from "./button-context";
 
-export interface ButtonPrimitiveRootProps {
+export interface ButtonPrimitiveRootProps extends PressableProps {
   children?: React.ReactNode;
 
-  onPress?: () => void;
-
   isDisabled?: boolean;
   isLoading?: boolean;
 

package/src/primitives/dropdown-menu/context.ts

@@ -0,0 +1,25 @@
+import { createContext, Dispatch, useContext } from "react";
+import { LayoutRectangle } from "react-native";
+import { DropdownMenuStyles } from "./types";
+import { LayoutPosition } from "@/hooks/useRelativePosition";
+
+export interface DropdownMenuContext {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+
+  styles?: DropdownMenuStyles;
+}
+
+export const DropdownMenuContext = createContext<DropdownMenuContext | undefined>(undefined);
+
+export const useDropdownMenu = () => {
+  const context = useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error("useDropdownMenu must be used within a DropdownMenuRoot");
+  }
+  return context;
+};

package/src/primitives/dropdown-menu/dropdown-menu-button.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useDropdownMenu } from "./context";
+import { DropdownMenuButtonState } from "./types";
+
+export interface DropdownMenuButtonProps {
+  children?: string;
+  onPress?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+
+  render?: (props: DropdownMenuButtonProps) => React.ReactElement;
+
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isHovered: boolean): DropdownMenuButtonState => {
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function DropdownMenuButton(props: DropdownMenuButtonProps) {
+  const menu = useDropdownMenu();
+  const [isHovered, setIsHovered] = useState(false);
+  const state = calculateState(isHovered);
+  const composedStyle = [menu.styles?.button?.default, menu.styles?.button?.[state], props.style];
+
+  const handlePress = () => {
+    props.onPress?.();
+    menu.setIsOpen((prev) => !prev);
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      {...props}
+      onPress={handlePress}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}