@korsolutions/ui 0.0.50 → 0.0.51

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

@@ -0,0 +1,35 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
+import React, { useState } from "react";
+import { type LayoutRectangle } from "react-native";
+import { MenuContext } from "../context";
+import { MenuVariants } from "../variants";
+
+export interface MenuRootProps {
+  variant?: keyof typeof MenuVariants;
+  children?: React.ReactNode;
+
+  render?: (props: MenuRootProps) => React.ReactNode;
+}
+
+export function MenuRoot(props: MenuRootProps) {
+  const variantStyles = MenuVariants[props.variant || "default"]();
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+
+  return (
+    <MenuContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        triggerPosition,
+        setTriggerPosition,
+        contentLayout,
+        setContentLayout,
+        styles: variantStyles,
+      }}
+    >
+      {props.children}
+    </MenuContext.Provider>
+  );
+}

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

@@ -0,0 +1,57 @@
+import type { ViewRef } from "@/types/element.types";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { type PressableProps } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuTriggerProps extends PressableProps {
+  children: React.ReactElement<PressableProps & React.RefAttributes<ViewRef>>;
+}
+
+export interface MenuTriggerRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>((props, ref) => {
+  const menu = useMenu();
+  const triggerRef = useRef<ViewRef>(null);
+
+  const onTriggerPress = async () => {
+    if (!menu.isOpen) {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        menu.setTriggerPosition(layout);
+        menu.setIsOpen(true);
+      });
+    } else {
+      menu.setIsOpen(false);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
+        menu.setTriggerPosition({
+          height,
+          width,
+          pageX,
+          pageY,
+        });
+        menu.setIsOpen(true);
+      });
+    },
+    close: () => menu.setIsOpen(false),
+  }));
+
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: menu.isOpen },
+    ...props.children.props,
+  });
+});
+
+MenuTrigger.displayName = "MenuTrigger";

package/src/components/menu/context.ts

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

package/src/components/menu/index.ts

@@ -0,0 +1,23 @@
+import { MenuContent } from "./components/menu-content";
+import { MenuItem } from "./components/menu-item";
+import { MenuOverlay } from "./components/menu-overlay";
+import { MenuPortal } from "./components/menu-portal";
+import { MenuRoot } from "./components/menu-root";
+import { MenuTrigger } from "./components/menu-trigger";
+
+export const Menu = {
+  Root: MenuRoot,
+  Trigger: MenuTrigger,
+  Portal: MenuPortal,
+  Overlay: MenuOverlay,
+  Content: MenuContent,
+  Item: MenuItem,
+};
+
+export type { MenuContentProps } from "./components/menu-content";
+export type { MenuItemProps } from "./components/menu-item";
+export type { MenuOverlayProps } from "./components/menu-overlay";
+export type { MenuPortalProps } from "./components/menu-portal";
+export type { MenuRootProps } from "./components/menu-root";
+export type { MenuTriggerProps } from "./components/menu-trigger";
+export type { MenuStyles } from "./types";

package/src/components/menu/types.ts

@@ -0,0 +1,11 @@
+import type { MenuContentProps } from "./components/menu-content";
+import type { MenuItemProps } from "./components/menu-item";
+import type { MenuOverlayProps } from "./components/menu-overlay";
+
+export type MenuButtonState = "default" | "hovered";
+
+export interface MenuStyles {
+  content?: MenuContentProps["style"];
+  item?: Partial<Record<MenuButtonState, MenuItemProps["style"]>>;
+  overlay?: MenuOverlayProps["style"];
+}

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

@@ -0,0 +1,36 @@
+import { type MenuStyles } from "@/components";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useMenuVariantDefault = (): MenuStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): MenuStyles => ({
+      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,
+      },
+      item: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          color: colors.foreground,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+    }),
+  );
+};

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

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

package/src/components/popover/components/popover-close.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { type PressableProps } from "react-native";
+import { usePopover } from "../context";
+
+export interface PopoverCloseProps {
+  children: React.ReactElement<PressableProps>;
+}
+
+export function PopoverClose(props: PopoverCloseProps): React.ReactElement {
+  const popover = usePopover();
+  return React.cloneElement(props.children, {
+    ...props.children.props,
+    onPress: (e) => {
+      popover.setIsOpen(false);
+      props.children.props.onPress?.(e);
+    },
+  });
+}

package/src/components/popover/components/popover-content.tsx

@@ -0,0 +1,42 @@
+import { useRelativePosition } from "@/hooks/use-relative-position";
+import { useSafeAreaInsets } from "@/safe-area";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { usePopover } from "../context";
+
+export interface PopoverContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: PopoverContentProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PopoverContent(props: PopoverContentProps) {
+  const popover = usePopover();
+  const insets = useSafeAreaInsets();
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition: popover.triggerPosition,
+    contentLayout: popover.contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 0,
+    insets,
+  });
+
+  const composedStyle = [positionStyle, popover.styles?.content, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      onLayout={(e) => {
+        popover.setContentLayout(e.nativeEvent.layout);
+      }}
+      pointerEvents="box-none"
+      style={composedStyle}
+    />
+  );
+}

package/src/components/popover/components/popover-overlay.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Pressable, type PressableProps, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import { usePopover } from "../context";
+
+export interface PopoverOverlayProps extends Omit<PressableProps, "onPress"> {
+  onPress?: () => void;
+  closeOnPress?: boolean;
+
+  render?: (props: PopoverOverlayProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function PopoverOverlay(props: PopoverOverlayProps) {
+  const { closeOnPress = true, ...restProps } = props;
+  const popover = usePopover();
+
+  const composedStyle = [StyleSheet.absoluteFill, popover.styles?.overlay, props.style];
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      {...restProps}
+      onPress={() => {
+        if (closeOnPress) {
+          popover.setIsOpen(false);
+        }
+        props.onPress?.();
+      }}
+      pointerEvents="auto"
+      style={composedStyle}
+    />
+  );
+}

package/src/components/popover/components/popover-portal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Portal } from "../../portal";
+import { PopoverContext, usePopover } from "../context";
+
+export interface PopoverPortalProps {
+  children?: React.ReactNode;
+}
+
+export function PopoverPortal(props: PopoverPortalProps) {
+  const popover = usePopover();
+
+  if (!popover.isOpen) {
+    return null;
+  }
+
+  return (
+    <Portal name="popover-portal">
+      <PopoverContext.Provider value={popover}>{props.children}</PopoverContext.Provider>
+    </Portal>
+  );
+}

package/src/components/popover/components/popover-root.tsx

@@ -0,0 +1,33 @@
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
+import React, { useState } from "react";
+import { type LayoutRectangle } from "react-native";
+import { PopoverContext } from "../context";
+import { PopoverVariants } from "../variants";
+
+export interface PopoverRootProps {
+  variant?: keyof typeof PopoverVariants;
+  children?: React.ReactNode;
+}
+
+export function PopoverRoot(props: PopoverRootProps) {
+  const variantStyles = PopoverVariants[props.variant || "default"]();
+  const [isOpen, setIsOpen] = useState(false);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+
+  return (
+    <PopoverContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        contentLayout,
+        setContentLayout,
+        triggerPosition,
+        setTriggerPosition,
+        styles: variantStyles,
+      }}
+    >
+      {props.children}
+    </PopoverContext.Provider>
+  );
+}

package/src/components/popover/components/popover-trigger.tsx

@@ -0,0 +1,57 @@
+import type { ViewRef } from "@/types/element.types";
+import { measureLayoutPosition } from "@/utils/normalize-layout";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { type PressableProps } from "react-native";
+import { usePopover } from "../context";
+
+export interface PopoverTriggerProps extends PressableProps {
+  children: React.ReactElement<React.RefAttributes<ViewRef> & PressableProps>;
+}
+
+export interface PopoverTriggerRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>((props, ref) => {
+  const popover = usePopover();
+  const triggerRef = useRef<ViewRef>(null);
+
+  const onTriggerPress = async () => {
+    if (!popover.isOpen) {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        popover.setTriggerPosition(layout);
+        popover.setIsOpen(true);
+      });
+    } else {
+      popover.setIsOpen(false);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
+        popover.setTriggerPosition({
+          height,
+          width,
+          pageX,
+          pageY,
+        });
+        popover.setIsOpen(true);
+      });
+    },
+    close: () => popover.setIsOpen(false),
+  }));
+
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: popover.isOpen },
+    ...props.children.props,
+  });
+});
+
+PopoverTrigger.displayName = "PopoverTrigger";

package/src/components/popover/index.ts

@@ -0,0 +1,24 @@
+import { PopoverClose } from "./components/popover-close";
+import { PopoverContent } from "./components/popover-content";
+import { PopoverOverlay } from "./components/popover-overlay";
+import { PopoverPortal } from "./components/popover-portal";
+import { PopoverRoot } from "./components/popover-root";
+import { PopoverTrigger } from "./components/popover-trigger";
+
+export const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Overlay: PopoverOverlay,
+  Content: PopoverContent,
+  Close: PopoverClose,
+};
+
+export type { PopoverCloseProps } from "./components/popover-close";
+export type { PopoverContentProps } from "./components/popover-content";
+export type { PopoverOverlayProps } from "./components/popover-overlay";
+export type { PopoverPortalProps } from "./components/popover-portal";
+export type { PopoverRootProps } from "./components/popover-root";
+export type { PopoverTriggerProps, PopoverTriggerRef } from "./components/popover-trigger";
+export { usePopover } from "./context";
+export type { PopoverContext } from "./context";

package/src/components/popover/types.ts

@@ -0,0 +1,7 @@
+import type { PopoverContentProps } from "./components/popover-content";
+import type { PopoverOverlayProps } from "./components/popover-overlay";
+
+export interface PopoverStyles {
+  overlay?: PopoverOverlayProps["style"];
+  content?: PopoverContentProps["style"];
+}

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

@@ -1,4 +1,4 @@
-import { type PopoverStyles } from "@/primitives/popover/types";
+import { type PopoverStyles } from "@/components/popover/types";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const usePopoverVariantDefault = (): PopoverStyles => {
@@ -20,6 +20,6 @@ export const usePopoverVariantDefault = (): PopoverStyles => {
         elevation: 8,
         zIndex: 1000,
       },
-    })
+    }),
   );
 };

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

@@ -1,4 +1,4 @@
-import { type PopoverStyles } from "@/primitives/popover/types";
+import { type PopoverStyles } from "@/components/popover/types";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const usePopoverVariantUnstyled = (): PopoverStyles => {
@@ -8,6 +8,6 @@ export const usePopoverVariantUnstyled = (): PopoverStyles => {
         backgroundColor: "rgba(0, 0, 0, 0.5)",
       },
       content: {},
-    })
+    }),
   );
 };

package/src/components/progress/components/progress-indicator.tsx

@@ -0,0 +1,21 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useProgress } from "../context";
+
+export interface ProgressIndicatorProps {
+  render?: (props: ProgressIndicatorProps & { percentage: number }) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ProgressIndicator(props: ProgressIndicatorProps) {
+  const progress = useProgress();
+
+  const percentage = Math.min(Math.max((progress.value / progress.max) * 100, 0), 100);
+
+  const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} percentage={percentage} style={[composedStyle, { width: `${percentage}%` }]} />;
+}

package/src/components/progress/components/progress-root.tsx

@@ -0,0 +1,37 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { ProgressContext } from "../context";
+import { ProgressVariants } from "../variants";
+
+export interface ProgressRootProps {
+  variant?: keyof typeof ProgressVariants;
+  children?: React.ReactNode;
+
+  render?: (props: ProgressRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+
+  value?: number;
+  max?: number;
+}
+
+export function ProgressRoot(props: ProgressRootProps) {
+  const { value = 0, max = 100 } = props;
+  const variantStyles = ProgressVariants[props.variant || "default"]();
+  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <ProgressContext.Provider
+      value={{
+        state: "default",
+        styles: variantStyles,
+        value,
+        max,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </ProgressContext.Provider>
+  );
+}

package/src/components/progress/index.ts

@@ -1 +1,11 @@
-export { Progress } from "./progress";
+import { ProgressIndicator } from "./components/progress-indicator";
+import { ProgressRoot } from "./components/progress-root";
+
+export const Progress = {
+  Root: ProgressRoot,
+  Indicator: ProgressIndicator,
+};
+
+export type { ProgressIndicatorProps } from "./components/progress-indicator";
+export type { ProgressRootProps } from "./components/progress-root";
+export type { ProgressStyles } from "./types";

package/src/components/progress/types.ts

@@ -0,0 +1,9 @@
+import type { ProgressIndicatorProps } from "./components/progress-indicator";
+import type { ProgressRootProps } from "./components/progress-root";
+
+export type ProgressState = "default";
+
+export interface ProgressStyles {
+  root?: Partial<Record<ProgressState, ProgressRootProps["style"]>>;
+  indicator?: Partial<Record<ProgressState, ProgressIndicatorProps["style"]>>;
+}

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

@@ -1,4 +1,4 @@
-import { type ProgressStyles } from "@/primitives";
+import { type ProgressStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useProgressVariantDefault = (): ProgressStyles => {
@@ -20,6 +20,6 @@ export const useProgressVariantDefault = (): ProgressStyles => {
           borderRadius: radius,
         },
       },
-    })
+    }),
   );
 };

package/src/components/scroll-bar/index.ts

@@ -0,0 +1 @@
+export * from "./scroll-bar";

package/src/components/scroll-bar/scroll-bar.tsx

@@ -0,0 +1,50 @@
+import { useTheme } from "@/themes";
+import React, { useEffect } from "react";
+import { Platform } from "react-native";
+
+export type ScrollBarProps = {
+  thumbColor?: string;
+  trackColor?: string;
+};
+
+export function ScrollBar(params: ScrollBarProps) {
+  const theme = useTheme();
+
+  const { thumbColor = theme.colors.border, trackColor = "transparent" } = params;
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const styles = document.createElement("style");
+    styles.id = "korsolutions-ui-scroll-bar-styles";
+    styles.innerHTML = `
+      :root {
+        scrollbar-width: thin;
+        scrollbar-color: ${thumbColor} ${trackColor};
+
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+          background: ${trackColor};
+        }
+
+        ::-webkit-scrollbar-thumb {
+          background-color: ${thumbColor};
+          border-radius: 4px;
+          border: 2px solid ${trackColor};
+        }
+      }
+    `;
+    document.head.appendChild(styles);
+    return () => {
+      if (styles.parentNode) {
+        document.head.removeChild(styles);
+      }
+    };
+  }, [thumbColor, trackColor]);
+
+  // Future plans for native custom scroll bar
+  return <></>;
+}

package/src/components/select/components/select-content.tsx

@@ -0,0 +1,40 @@
+import { useRelativePosition } from "@/hooks/use-relative-position";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSelect } from "../context";
+
+export interface SelectContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: SelectContentProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SelectContent(props: SelectContentProps) {
+  const select = useSelect();
+  const composedStyles = calculateComposedStyles(select.styles, select.state, "content", props.style);
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition: select.triggerPosition,
+    contentLayout: select.contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 0,
+  });
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      style={[positionStyle, composedStyles, { width: select.triggerPosition.width }]}
+      onLayout={(e) => {
+        select.setContentLayout(e.nativeEvent.layout);
+      }}
+      pointerEvents="box-none"
+    >
+      {props.children}
+    </Component>
+  );
+}