@korsolutions/ui 0.0.49 → 0.0.51

package/src/components/index.ts

@@ -1,20 +1,24 @@
+export * from "./alert";
 export * from "./alert-dialog";
-export * from "./autocomplete/autocomplete";
-export * from "./avatar/avatar";
-export * from "./badge/badge";
-export * from "./button/button";
-export * from "./calendar/calendar";
-export * from "./card/card";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
 export * from "./checkbox";
-export * from "./dropdown-menu/dropdown-menu";
-export * from "./empty/empty";
-export * from "./field/field";
+export * from "./empty";
+export * from "./field";
+export * from "./icon";
 export * from "./input";
-export * from "./link/link";
-export * from "./popover/popover";
+export * from "./link";
+export * from "./list";
+export * from "./menu";
+export * from "./popover";
+export * from "./portal";
 export * from "./progress";
-export * from "./select/select";
+export * from "./scroll-bar";
+export * from "./select";
 export * from "./tabs";
-export * from "./textarea/textarea";
-export * from "./toast/index";
-export * from "./typography/typography";
+export * from "./textarea";
+export * from "./toast";
+export * from "./typography";

package/src/components/input/index.ts

@@ -1,2 +1,3 @@
 export * from "./input";
 export * from "./numeric-input";
+export type { InputStyles } from "./types";

package/src/components/input/input.tsx

@@ -1,14 +1,60 @@
-import { InputPrimitive, type InputPrimitiveBaseProps } from "@/primitives";
-import React from "react";
+import type { TextInputRef } from "@/types/element.types";
+import { forwardRef, useState } from "react";
+import { StyleSheet, TextInput, type TextInputProps } from "react-native";
+import { useFieldOptional } from "../field/context";
+import type { InputState } from "./types";
 import { InputVariants } from "./variants";
 
-export interface InputProps extends InputPrimitiveBaseProps {
+export type InputProps = Omit<TextInputProps, "onChange"> & {
   variant?: keyof typeof InputVariants;
-}
 
-export function Input(props: InputProps) {
-  const useVariantStyles = InputVariants[props.variant ?? "default"];
-  const variantStyles = useVariantStyles();
+  ref?: React.Ref<TextInputRef>;
+  onChange?: TextInputProps["onChangeText"];
+  isDisabled?: boolean;
+};
 
-  return <InputPrimitive {...props} styles={variantStyles} />;
-}
+const calculateState = (props: InputProps, isFocused: boolean): InputState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export const Input = forwardRef<TextInputRef, InputProps>((props, ref) => {
+  const variantStyles = InputVariants[props.variant || "default"]();
+  const [isFocused, setIsFocused] = useState(false);
+  const state = calculateState(props, isFocused);
+  const field = useFieldOptional();
+
+  const composedStyles = StyleSheet.flatten([variantStyles.default?.style, variantStyles[state]?.style, props.style]);
+  const composedProps = {
+    ...variantStyles.default,
+    ...variantStyles[state],
+    ...props,
+  };
+
+  return (
+    <TextInput
+      {...composedProps}
+      ref={ref}
+      id={field?.id}
+      onChange={undefined}
+      onChangeText={props.onChange}
+      onFocus={(e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+      }}
+      readOnly={props.isDisabled || props.readOnly}
+      style={composedStyles}
+    />
+  );
+});
+
+Input.displayName = "Input";

package/src/components/input/numeric-input.tsx

@@ -1,9 +1,9 @@
 import { useNumericMask, type NumericMaskFormat } from "@/hooks/use-numeric-mask";
-import { InputPrimitive, type InputPrimitiveBaseProps } from "@/primitives";
 import React, { useEffect } from "react";
+import { Input, type InputProps } from "./input";
 import { InputVariants } from "./variants";
 
-export interface NumericInputProps extends Omit<InputPrimitiveBaseProps, "value" | "onChange" | "keyboardType"> {
+export interface NumericInputProps extends Omit<InputProps, "value" | "onChange" | "keyboardType"> {
   variant?: keyof typeof InputVariants;
   value?: number | null;
   onChange?: (value: number | null) => void;
@@ -58,18 +58,14 @@ export function NumericInput({
     onFocus?.(e);
   };
 
-  const useVariantStyles = InputVariants[variant];
-  const variantStyles = useVariantStyles();
-
   return (
-    <InputPrimitive
+    <Input
       {...props}
       value={numericMask.value}
       onChange={numericMask.onChangeText}
       onBlur={handleBlur}
       onFocus={handleFocus}
       keyboardType={numericMask.keyboardType}
-      styles={variantStyles}
     />
   );
 }

package/src/components/input/types.ts

@@ -0,0 +1,5 @@
+import { type InputProps } from "./input";
+
+export type InputState = "default" | "focused" | "disabled";
+
+export type InputStyles = Partial<Record<InputState, InputProps>>;

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

@@ -1,4 +1,4 @@
-import { type InputStyles } from "@/primitives";
+import { type InputStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useInputVariantDefault(): InputStyles {
@@ -32,6 +32,6 @@ export function useInputVariantDefault(): InputStyles {
           backgroundColor: colors.muted,
         },
       },
-    })
+    }),
   );
 }

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

@@ -1,5 +1,7 @@
 import { useInputVariantDefault } from "./default";
+import { useInputVariantSecondary } from "./secondary";
 
 export const InputVariants = {
   default: useInputVariantDefault,
+  secondary: useInputVariantSecondary,
 };

package/src/components/input/variants/secondary.tsx

@@ -0,0 +1,37 @@
+import { type InputStyles } from "@/components";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useInputVariantSecondary(): InputStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
+      default: {
+        placeholderTextColor: colors.mutedForeground,
+        selectionColor: colors.primary,
+        style: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.background,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          outlineWidth: 0,
+          fontFamily,
+          fontSize,
+          height: 48,
+          color: colors.foreground,
+        },
+      },
+      focused: {
+        style: {
+          borderColor: colors.primary,
+        },
+      },
+      disabled: {
+        style: {
+          color: colors.mutedForeground,
+          backgroundColor: colors.muted,
+        },
+      },
+    }),
+  );
+}

package/src/components/link/index.ts

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

package/src/components/list/index.ts

@@ -0,0 +1,5 @@
+import { ListRoot } from "./list-root";
+
+export const List = ListRoot;
+
+export type { ListProps } from "./list-root";

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+export interface ListProps<T> {
+  data: readonly T[];
+  keyExtractor: (item: T, index: number) => string;
+  renderItem: (info: { item: T; index: number }) => React.ReactElement;
+  renderEmpty?: () => React.ReactElement;
+  renderSeparator?: () => React.ReactElement;
+}
+
+export const ListRoot = <T,>(props: ListProps<T>) => {
+  return (
+    <>
+      {props.data.length === 0 && props.renderEmpty?.()}
+      {props.data.map((item, index) => (
+        <React.Fragment key={props.keyExtractor(item, index) ?? index}>
+          {props.renderItem({ item, index })}
+          {props.data.length - 1 !== index && props.renderSeparator?.()}
+        </React.Fragment>
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { useRelativePosition } from "@/hooks/use-relative-position";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuContentProps {
+  children?: React.ReactNode;
+
+  render?: (props: MenuContentProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuContent(props: MenuContentProps) {
+  const menu = useMenu();
+
+  const positionStyle = useRelativePosition({
+    align: "start",
+    triggerPosition: menu.triggerPosition,
+    contentLayout: menu.contentLayout,
+    alignOffset: 0,
+    preferredSide: "bottom",
+    sideOffset: 0,
+  });
+
+  const composedStyle = [positionStyle, menu.styles?.content, props.style];
+
+  const Component = props.render ?? View;
+  return (
+    <Component
+      {...props}
+      onLayout={(e) => {
+        menu.setContentLayout(e.nativeEvent.layout);
+      }}
+      style={composedStyle}
+    />
+  );
+}

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

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useMenu } from "../context";
+import type { MenuButtonState } from "../types";
+
+export interface MenuItemProps {
+  children: string;
+  onPress?: () => void;
+
+  render?: (props: MenuItemProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isHovered: boolean): MenuButtonState => {
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function MenuItem(props: MenuItemProps) {
+  const menu = useMenu();
+  const [isHovered, setIsHovered] = useState(false);
+  const state = calculateState(isHovered);
+  const composedStyle = [menu.styles?.item?.default, menu.styles?.item?.[state], props.style];
+
+  const handlePress = () => {
+    props.onPress?.();
+    menu.setIsOpen((prev) => !prev);
+  };
+
+  const Component = props.render ?? Text;
+  return (
+    <Component
+      {...props}
+      onPress={handlePress}
+      onPointerEnter={() => setIsHovered(true)}
+      onPointerLeave={() => setIsHovered(false)}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import { useMenu } from "../context";
+
+export interface MenuOverlayProps {
+  children?: React.ReactNode;
+
+  render?: (props: MenuOverlayProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MenuOverlay(props: MenuOverlayProps) {
+  const menu = useMenu();
+
+  const composedStyle = [StyleSheet.absoluteFill, menu.styles?.overlay, props.style];
+
+  const Component = props.render ?? Pressable;
+  return (
+    <Component
+      onPress={() => {
+        menu.setIsOpen(false);
+      }}
+      style={composedStyle}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

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

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}
+    />
+  );
+}