@korsolutions/ui 0.0.50 → 0.0.52

package/src/primitives/checkbox/checkbox-title.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
-import { useCheckboxContext } from "./checkbox-context";
-
-export interface CheckboxPrimitiveTitleProps extends TextProps {
-  children: React.ReactNode;
-  style?: StyleProp<TextStyle>;
-}
-
-export function CheckboxTitle(props: CheckboxPrimitiveTitleProps) {
-  const { children, style, ...textProps } = props;
-  const { state, styles } = useCheckboxContext();
-
-  const calculatedStyle = [styles?.title?.default, styles?.title?.[state], style];
-
-  return (
-    <Text {...textProps} style={calculatedStyle}>
-      {children}
-    </Text>
-  );
-}

package/src/primitives/checkbox/index.ts

@@ -1,17 +0,0 @@
-import { CheckboxRoot } from "./checkbox-root";
-import { CheckboxIndicator } from "./checkbox-indicator";
-import { CheckboxTitle } from "./checkbox-title";
-import { CheckboxDescription } from "./checkbox-description";
-
-export const CheckboxPrimitive = {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-  Title: CheckboxTitle,
-  Description: CheckboxDescription,
-};
-
-export type { CheckboxPrimitiveRootProps } from "./checkbox-root";
-export type { CheckboxPrimitiveIndicatorProps } from "./checkbox-indicator";
-export type { CheckboxPrimitiveTitleProps } from "./checkbox-title";
-export type { CheckboxPrimitiveDescriptionProps } from "./checkbox-description";
-export * from "./types";

package/src/primitives/checkbox/types.ts

@@ -1,11 +0,0 @@
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-
-export type CheckboxState = "default" | "checked" | "disabled" | "hovered";
-
-export interface CheckboxStyles {
-  root?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
-  indicator?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
-  checkmark?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
-  title?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
-  description?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
-}

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

@@ -1,25 +0,0 @@
-import type { LayoutPosition } from "@/hooks/use-relative-position";
-import { createContext, type Dispatch, useContext } from "react";
-import type { LayoutRectangle } from "react-native";
-import type { DropdownMenuStyles } from "./types";
-
-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

@@ -1,47 +0,0 @@
-import React, { useState } from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-import type { 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>
-  );
-}

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

@@ -1,39 +0,0 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuContentProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuContentProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuContent(props: DropdownMenuContentProps) {
-  const menu = useDropdownMenu();
-
-  const positionStyle = useRelativePosition({
-    align: "start",
-    avoidCollisions: true,
-    triggerPosition: menu.triggerPosition,
-    contentLayout: menu.contentLayout,
-    alignOffset: 0,
-    side: "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/primitives/dropdown-menu/dropdown-menu-divider.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuDividerProps {
-  render?: (props: DropdownMenuDividerProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuDivider(props: DropdownMenuDividerProps) {
-  const menu = useDropdownMenu();
-
-  const composedStyle = StyleSheet.flatten([menu.styles?.divider, props.style]);
-
-  const Component = props.render ?? View;
-  return <Component {...props} style={composedStyle} />;
-}

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

@@ -1,29 +0,0 @@
-import React from "react";
-import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuOverlayProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuOverlayProps) => React.ReactElement;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuOverlay(props: DropdownMenuOverlayProps) {
-  const menu = useDropdownMenu();
-
-  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/primitives/dropdown-menu/dropdown-menu-portal.tsx

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

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

@@ -1,35 +0,0 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
-import React, { useState } from "react";
-import { type LayoutRectangle } from "react-native";
-import { DropdownMenuContext } from "./context";
-import type { DropdownMenuStyles } from "./types";
-
-export interface DropdownMenuRootProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuRootProps) => React.ReactNode;
-
-  styles?: DropdownMenuStyles;
-}
-
-export function DropdownMenuRoot(props: DropdownMenuRootProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
-  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
-
-  return (
-    <DropdownMenuContext.Provider
-      value={{
-        isOpen,
-        setIsOpen,
-        triggerPosition,
-        setTriggerPosition,
-        contentLayout,
-        setContentLayout,
-        styles: props.styles,
-      }}
-    >
-      {props.children}
-    </DropdownMenuContext.Provider>
-  );
-}

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

@@ -1,57 +0,0 @@
-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 { useDropdownMenu } from "./context";
-
-export interface DropdownMenuTriggerProps extends PressableProps {
-  children: React.ReactElement<PressableProps & React.RefAttributes<ViewRef>>;
-}
-
-export interface DropdownMenuTriggerRef {
-  open: () => void;
-  close: () => void;
-}
-
-export const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerRef, DropdownMenuTriggerProps>((props, ref) => {
-  const dropdownMenu = useDropdownMenu();
-  const triggerRef = useRef<ViewRef>(null);
-
-  const onTriggerPress = async () => {
-    if (!dropdownMenu.isOpen) {
-      measureLayoutPosition(triggerRef.current, (layout) => {
-        dropdownMenu.setTriggerPosition(layout);
-        dropdownMenu.setIsOpen(true);
-      });
-    } else {
-      dropdownMenu.setIsOpen(false);
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        dropdownMenu.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
-        });
-        dropdownMenu.setIsOpen(true);
-      });
-    },
-    close: () => dropdownMenu.setIsOpen(false),
-  }));
-
-  return React.cloneElement(props.children, {
-    ref: triggerRef,
-    onPress: onTriggerPress,
-    role: "button",
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityState: { expanded: dropdownMenu.isOpen },
-    ...props.children.props,
-  });
-});
-
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";

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

@@ -1,26 +0,0 @@
-import { DropdownMenuRoot } from "./dropdown-menu-root";
-import { DropdownMenuTrigger } from "./dropdown-menu-trigger";
-import { DropdownMenuContent } from "./dropdown-menu-content";
-import { DropdownMenuButton } from "./dropdown-menu-button";
-import { DropdownMenuDivider } from "./dropdown-menu-divider";
-import { DropdownMenuPortal } from "./dropdown-menu-portal";
-import { DropdownMenuOverlay } from "./dropdown-menu-overlay";
-
-export const DropdownMenuPrimitive = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Overlay: DropdownMenuOverlay,
-  Content: DropdownMenuContent,
-  Button: DropdownMenuButton,
-  Divider: DropdownMenuDivider,
-};
-
-export type { DropdownMenuRootProps } from "./dropdown-menu-root";
-export type { DropdownMenuTriggerProps } from "./dropdown-menu-trigger";
-export type { DropdownMenuPortalProps } from "./dropdown-menu-portal";
-export type { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
-export type { DropdownMenuContentProps } from "./dropdown-menu-content";
-export type { DropdownMenuButtonProps } from "./dropdown-menu-button";
-export type { DropdownMenuDividerProps } from "./dropdown-menu-divider";
-export type { DropdownMenuStyles } from "./types";

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

@@ -1,13 +0,0 @@
-import type { DropdownMenuButtonProps } from "./dropdown-menu-button";
-import type { DropdownMenuContentProps } from "./dropdown-menu-content";
-import type { DropdownMenuDividerProps } from "./dropdown-menu-divider";
-import type { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
-
-export type DropdownMenuButtonState = "default" | "hovered";
-
-export interface DropdownMenuStyles {
-  content?: DropdownMenuContentProps["style"];
-  button?: Partial<Record<DropdownMenuButtonState, DropdownMenuButtonProps["style"]>>;
-  divider?: DropdownMenuDividerProps["style"];
-  overlay?: DropdownMenuOverlayProps["style"];
-}

package/src/primitives/empty/empty-description.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useEmpty } from "./context";
-
-export interface EmptyDescriptionProps {
-  children: string;
-  render?: (props: EmptyDescriptionProps) => React.ReactNode;
-  style?: StyleProp<TextStyle>;
-}
-
-export function EmptyDescription(props: EmptyDescriptionProps) {
-  const empty = useEmpty();
-  const composedStyles = [empty.styles?.description, props.style];
-
-  return <Text {...props} style={composedStyles} />;
-}

package/src/primitives/empty/empty-media.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { useEmpty } from "./context";
-
-export interface EmptyMediaProps {
-  children: React.ReactNode;
-  render?: (props: EmptyMediaProps) => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function EmptyMedia(props: EmptyMediaProps) {
-  const empty = useEmpty();
-  const composedStyles = [empty.styles?.media, props.style];
-  const Component = props.render ?? View;
-  return <Component {...props} style={composedStyles} />;
-}

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { EmptyContext } from "./context";
-import type { EmptyStyles } from "./types";
-
-export interface EmptyRootProps {
-  children: React.ReactNode;
-  render?: (props: EmptyRootProps) => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  styles?: EmptyStyles;
-}
-
-export function EmptyRoot(props: EmptyRootProps) {
-  const composedStyles = [props.styles?.root, props.style];
-  const Component = props.render ?? View;
-  return (
-    <EmptyContext.Provider value={{ styles: props.styles }}>
-      <Component {...props} style={composedStyles} />
-    </EmptyContext.Provider>
-  );
-}

package/src/primitives/empty/empty-title.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useEmpty } from "./context";
-
-export interface EmptyTitleProps {
-  children: string;
-  render?: (props: EmptyTitleProps) => React.ReactNode;
-  style?: StyleProp<TextStyle>;
-}
-
-export function EmptyTitle(props: EmptyTitleProps) {
-  const empty = useEmpty();
-  const composedStyles = [empty.styles?.title, props.style];
-  const Component = props.render ?? Text;
-  return <Component {...props} style={composedStyles} />;
-}

package/src/primitives/empty/index.ts

@@ -1,17 +0,0 @@
-import { EmptyRoot } from "./empty-root";
-import { EmptyMedia } from "./empty-media";
-import { EmptyTitle } from "./empty-title";
-import { EmptyDescription } from "./empty-description";
-
-export const EmptyPrimitive = {
-  Root: EmptyRoot,
-  Media: EmptyMedia,
-  Title: EmptyTitle,
-  Description: EmptyDescription,
-};
-
-export type { EmptyRootProps } from "./empty-root";
-export type { EmptyMediaProps } from "./empty-media";
-export type { EmptyTitleProps } from "./empty-title";
-export type { EmptyDescriptionProps } from "./empty-description";
-export type { EmptyStyles } from "./types";

package/src/primitives/empty/types.ts

@@ -1,11 +0,0 @@
-import type { EmptyDescriptionProps } from "./empty-description";
-import type { EmptyMediaProps } from "./empty-media";
-import type { EmptyRootProps } from "./empty-root";
-import type { EmptyTitleProps } from "./empty-title";
-
-export type EmptyStyles = {
-  root?: EmptyRootProps["style"];
-  media?: EmptyMediaProps["style"];
-  title?: EmptyTitleProps["style"];
-  description?: EmptyDescriptionProps["style"];
-};

package/src/primitives/field/field-description.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useField } from "./context";
-
-export interface FieldDescriptionProps {
-  children: string;
-
-  render?: (props: FieldDescriptionProps) => React.ReactNode;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function FieldDescription(props: FieldDescriptionProps) {
-  const field = useField();
-  const Component = props.render ?? Text;
-  return <Component {...props} style={[field.styles?.description, props.style]} />;
-}

package/src/primitives/field/field-error.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useField } from "./context";
-
-export interface FieldErrorProps {
-  children: string;
-
-  render?: (props: FieldErrorProps) => React.ReactNode;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function FieldError(props: FieldErrorProps) {
-  const field = useField();
-  const Component = props.render ?? Text;
-  return <Component {...props} style={[field.styles?.error, props.style]} />;
-}

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { Text, type TextProps } from "react-native";
-import { useField } from "./context";
-
-export interface FieldLabelProps {
-  children: string;
-
-  for?: string;
-
-  render?: (props: FieldLabelProps) => React.ReactNode;
-
-  style?: TextProps["style"];
-}
-
-export function FieldLabel(props: FieldLabelProps) {
-  const field = useField();
-
-  const Component = props.render ?? Text;
-  return <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />;
-}

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

@@ -1,24 +0,0 @@
-import React, { useId } from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { FieldContext } from "./context";
-import type { FieldStyles } from "./types";
-
-export interface FieldPrimitiveRootProps {
-  children?: React.ReactNode;
-
-  render?: (props: FieldPrimitiveRootProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-  styles?: FieldStyles;
-}
-
-export function FieldRoot(props: FieldPrimitiveRootProps) {
-  const id = useId();
-  const composedStyles = [props.styles?.root, props.style];
-  const Component = props.render ?? View;
-  return (
-    <FieldContext.Provider value={{ styles: props.styles, id }}>
-      <Component {...props} style={composedStyles} />
-    </FieldContext.Provider>
-  );
-}

package/src/primitives/field/index.ts

@@ -1,17 +0,0 @@
-import { FieldRoot } from "./field-root";
-import { FieldLabel } from "./field-label";
-import { FieldDescription } from "./field-description";
-import { FieldError } from "./field-error";
-
-export const FieldPrimitive = {
-  Root: FieldRoot,
-  Label: FieldLabel,
-  Description: FieldDescription,
-  Error: FieldError,
-};
-
-export type { FieldPrimitiveRootProps } from "./field-root";
-export type { FieldLabelProps } from "./field-label";
-export type { FieldDescriptionProps } from "./field-description";
-export type { FieldErrorProps } from "./field-error";
-export type { FieldStyles } from "./types";

package/src/primitives/field/types.ts

@@ -1,11 +0,0 @@
-import type { FieldDescriptionProps } from "./field-description";
-import type { FieldErrorProps } from "./field-error";
-import type { FieldLabelProps } from "./field-label";
-import type { FieldPrimitiveRootProps } from "./field-root";
-
-export interface FieldStyles {
-  root?: FieldPrimitiveRootProps["style"];
-  label?: FieldLabelProps["style"];
-  description?: FieldDescriptionProps["style"];
-  error?: FieldErrorProps["style"];
-}

package/src/primitives/index.ts

@@ -1,22 +0,0 @@
-export * from "./alert";
-export * from "./alert-dialog";
-export * from "./autocomplete";
-export * from "./avatar";
-export * from "./badge";
-export * from "./button";
-export * from "./calendar";
-export * from "./card";
-export * from "./checkbox";
-export * from "./dropdown-menu";
-export * from "./empty";
-export * from "./field";
-export * from "./input";
-export * from "./list";
-export * from "./popover";
-export * from "./portal";
-export * from "./progress";
-export * from "./select";
-export * from "./tabs";
-export * from "./textarea";
-export * from "./toast";
-export * from "./typography";

package/src/primitives/input/index.ts

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