@korsolutions/ui 0.0.49 → 0.0.51

package/src/primitives/select/select-option.tsx

@@ -1,64 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { useEffect, useState } from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useSelect } from "./context";
-import type { SelectOptionState, SelectState } from "./types";
-
-export interface SelectOptionProps {
-  children: string;
-  value: string;
-
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-
-  render?: (props: SelectOptionProps) => React.ReactElement;
-
-  style?: StyleProp<TextStyle>;
-}
-
-const calculateState = (selectState: SelectState, hovered: boolean, selected: boolean): SelectOptionState => {
-  if (selectState === "disabled") {
-    return "disabled";
-  }
-  if (selected) {
-    return "selected";
-  }
-  if (hovered) {
-    return "hovered";
-  }
-  return "default";
-};
-
-export function SelectOption(props: SelectOptionProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const select = useSelect();
-  const isSelected = select.value === props.value;
-
-  const optionState = calculateState(select.state, isHovered, isSelected);
-  const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
-
-  useEffect(() => {
-    select.setOptions((prev) => {
-      if (prev.find((option) => option.value === props.value)) {
-        return prev;
-      }
-      return [...prev, { value: props.value, label: props.children }];
-    });
-  }, [props.value, props.children]);
-
-  const Component = props.render ?? Text;
-  return (
-    <Component
-      value={props.value}
-      onPress={() => {
-        select.onChange?.(props.value);
-        select.setIsOpen(false);
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      style={composedStyles}
-    >
-      {props.children}
-    </Component>
-  );
-}

package/src/primitives/select/select-overlay.tsx

@@ -1,32 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React from "react";
-import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-import { useSelect } from "./context";
-
-export interface SelectOverlayProps {
-  children?: React.ReactNode;
-
-  onPress?: () => void;
-
-  style?: StyleProp<ViewStyle>;
-
-  render?: (props: SelectOverlayProps) => React.ReactElement;
-}
-
-export function SelectOverlay(props: SelectOverlayProps) {
-  const select = useSelect();
-
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "overlay", props.style);
-
-  const Component = props.render ?? Pressable;
-  return (
-    <Component
-      onPress={() => {
-        select.setIsOpen(false);
-      }}
-      style={[StyleSheet.absoluteFill, composedStyles]}
-    >
-      {props.children}
-    </Component>
-  );
-}

package/src/primitives/select/select-portal.tsx

@@ -1,27 +0,0 @@
-import React, { useEffect } from "react";
-import { Portal } from "../portal";
-import { useSelect, SelectContext } from "./context";
-
-export interface SelectPortalProps {
-  children?: React.ReactNode;
-}
-
-export function SelectPortal(props: SelectPortalProps) {
-  const select = useSelect();
-
-  useEffect(() => {
-    return () => {
-      select.setOptions([]);
-    };
-  }, []);
-
-  if (!select.isOpen) {
-    return null;
-  }
-
-  return (
-    <Portal name="select-portal">
-      <SelectContext.Provider value={select}>{props.children}</SelectContext.Provider>
-    </Portal>
-  );
-}

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

@@ -1,68 +0,0 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React, { useState } from "react";
-import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
-import { SelectContext } from "./context";
-import type { SelectOption, SelectState, SelectStyles } from "./types";
-
-interface SelectRootInjectedProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-export interface SelectRootBaseProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-
-  isDisabled?: boolean;
-}
-
-export interface SelectRootProps extends SelectRootBaseProps {
-  children?: React.ReactNode;
-
-  render?: (props: SelectRootInjectedProps) => React.ReactElement;
-
-  styles?: SelectStyles;
-  style?: StyleProp<ViewStyle>;
-}
-
-const calculateState = (props: SelectRootProps): SelectState => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  return "default";
-};
-
-export function SelectRoot(props: SelectRootProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
-  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
-  const [options, setOptions] = useState<Array<SelectOption>>([]);
-
-  const state = calculateState(props);
-  const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
-
-  const Component = props.render ?? View;
-  return (
-    <SelectContext.Provider
-      value={{
-        value: props.value,
-        onChange: props.onChange,
-        placeholder: props.placeholder,
-        isOpen,
-        setIsOpen,
-        triggerPosition,
-        setTriggerPosition,
-        contentLayout,
-        setContentLayout,
-        options,
-        setOptions,
-        state,
-        isDisabled: props.isDisabled ?? false,
-        styles: props.styles ?? null,
-      }}
-    >
-      <Component style={composedStyles}>{props.children}</Component>
-    </SelectContext.Provider>
-  );
-}

package/src/primitives/select/select-trigger.tsx

@@ -1,36 +0,0 @@
-import type { ViewRef } from "@/types/element.types";
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
-import React, { useRef } from "react";
-import { Pressable, type StyleProp, type ViewStyle } from "react-native";
-import { useSelect } from "./context";
-
-export interface SelectTriggerProps {
-  children?: React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function SelectTrigger(props: SelectTriggerProps) {
-  const select = useSelect();
-  const triggerRef = useRef<ViewRef>(null);
-
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
-
-  const onTriggerPress = () => {
-    if (!select.isOpen) {
-      measureLayoutPosition(triggerRef.current, (layout) => {
-        select.setTriggerPosition(layout);
-        select.setIsOpen(true);
-      });
-    } else {
-      select.setIsOpen(false);
-    }
-  };
-
-  return (
-    <Pressable ref={triggerRef} onPress={onTriggerPress} disabled={select.isDisabled} style={composedStyles}>
-      {props.children}
-    </Pressable>
-  );
-}

package/src/primitives/select/select-value.tsx

@@ -1,21 +0,0 @@
-import { calculateComposedStyles } from "@/utils/calculate-styles";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useSelect } from "./context";
-
-export interface SelectValueProps {
-  style?: StyleProp<TextStyle>;
-
-  render?: (props: SelectValueProps) => React.ReactElement;
-}
-
-export function SelectValue(props: SelectValueProps) {
-  const select = useSelect();
-
-  const selectedOption = select.options.find((option) => option.value === select.value);
-  const selectedOptionLabel = selectedOption?.label;
-
-  const composedStyles = calculateComposedStyles(select.styles, select.state, selectedOptionLabel ? "value" : "placeholder", props.style);
-  const Component = props.render ?? Text;
-  return <Component style={composedStyles}>{selectedOption?.label ?? select.placeholder}</Component>;
-}

package/src/primitives/select/types.ts

@@ -1,24 +0,0 @@
-import type { SelectContentProps } from "./select-content";
-import type { SelectOptionProps } from "./select-option";
-import type { SelectOverlayProps } from "./select-overlay";
-import type { SelectRootProps } from "./select-root";
-import type { SelectTriggerProps } from "./select-trigger";
-import type { SelectValueProps } from "./select-value";
-
-export type SelectState = "default" | "disabled";
-export type SelectOptionState = SelectState | "hovered" | "selected";
-
-export interface SelectStyles {
-  root?: Partial<Record<SelectState, SelectRootProps["style"]>>;
-  trigger?: Partial<Record<SelectState, SelectTriggerProps["style"]>>;
-  value?: Partial<Record<SelectState, SelectValueProps["style"]>>;
-  placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
-  overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
-  content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
-  option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
-}
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}

package/src/primitives/tabs/index.ts

@@ -1,17 +0,0 @@
-import { TabsList } from "./tabs-list";
-import { TabsRoot } from "./tabs-root";
-import { TabsTrigger } from "./tabs-trigger";
-import { TabsTriggerText } from "./tabs-trigger-text";
-
-export const TabsPrimitive = {
-  Root: TabsRoot,
-  List: TabsList,
-  Trigger: TabsTrigger,
-  TriggerText: TabsTriggerText,
-};
-
-export type { TabsPrimitiveListProps } from "./tabs-list";
-export type { TabsPrimitiveRootProps } from "./tabs-root";
-export type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
-export type { TabsPrimitiveTriggerTextProps } from "./tabs-trigger-text";
-export * from "./types";

package/src/primitives/tabs/tabs-context.tsx

@@ -1,18 +0,0 @@
-import React, { useContext } from "react";
-import type { TabsStyles } from "./types";
-
-export interface TabsPrimitiveContextValue {
-  value: string;
-  onChange: (value: string) => void;
-  styles?: TabsStyles;
-}
-
-export const TabsPrimitiveContext = React.createContext<TabsPrimitiveContextValue | null>(null);
-
-export const useTabsContext = () => {
-  const context = useContext(TabsPrimitiveContext);
-  if (!context) {
-    throw new Error("Tabs compound components must be used within TabsPrimitive.Root");
-  }
-  return context;
-};

package/src/primitives/tabs/tabs-list.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { useTabsContext } from "./tabs-context";
-
-export interface TabsPrimitiveListProps extends ViewProps {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function TabsList(props: TabsPrimitiveListProps) {
-  const { children, style, ...viewProps } = props;
-  const { styles } = useTabsContext();
-
-  const calculatedStyle = [styles?.list, style];
-
-  return (
-    <View {...viewProps} style={calculatedStyle}>
-      {children}
-    </View>
-  );
-}

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

@@ -1,33 +0,0 @@
-import React, { useMemo } from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { TabsPrimitiveContext } from "./tabs-context";
-import type { TabsStyles } from "./types";
-
-export interface TabsPrimitiveRootProps extends Omit<ViewProps, "children"> {
-  children: React.ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-  style?: StyleProp<ViewStyle>;
-  styles?: TabsStyles;
-}
-
-export function TabsRoot(props: TabsPrimitiveRootProps) {
-  const { children, value, onChange, styles, style, ...viewProps } = props;
-
-  const contextValue = useMemo(
-    () => ({
-      value,
-      onChange,
-      styles,
-    }),
-    [value, onChange, styles]
-  );
-
-  return (
-    <TabsPrimitiveContext.Provider value={contextValue}>
-      <View {...viewProps} style={style}>
-        {children}
-      </View>
-    </TabsPrimitiveContext.Provider>
-  );
-}

package/src/primitives/tabs/tabs-trigger-text.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
-import { useTabsContext } from "./tabs-context";
-
-export interface TabsPrimitiveTriggerTextProps extends TextProps {
-  children: React.ReactNode;
-  value: string;
-  isDisabled?: boolean;
-  style?: StyleProp<TextStyle>;
-}
-
-export function TabsTriggerText(props: TabsPrimitiveTriggerTextProps) {
-  const { children, value: triggerValue, isDisabled, style, ...textProps } = props;
-  const { value, styles } = useTabsContext();
-
-  const isActive = value === triggerValue;
-  const state = isDisabled ? "disabled" : isActive ? "active" : "default";
-
-  const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
-
-  return (
-    <Text {...textProps} style={calculatedStyle}>
-      {children}
-    </Text>
-  );
-}

package/src/primitives/tabs/tabs-trigger.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { useTabsContext } from "./tabs-context";
-import type { TabsState } from "./types";
-
-export interface TabsPrimitiveTriggerProps extends PressableProps {
-  children: React.ReactNode;
-  value: string;
-  isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const calculateState = (isActive: boolean, isDisabled: boolean | undefined): TabsState => {
-  if (isDisabled) {
-    return "disabled";
-  }
-  if (isActive) {
-    return "active";
-  }
-  return "default";
-};
-
-export function TabsTrigger(props: TabsPrimitiveTriggerProps) {
-  const { children, value: triggerValue, isDisabled, style, ...pressableProps } = props;
-  const { value, onChange, styles } = useTabsContext();
-
-  const isActive = value === triggerValue;
-  const state = calculateState(isActive, isDisabled);
-
-  const handlePress = () => {
-    if (!isDisabled) {
-      onChange(triggerValue);
-    }
-  };
-
-  const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
-
-  return (
-    <Pressable {...pressableProps} disabled={isDisabled} onPress={handlePress} style={calculatedStyle}>
-      {children}
-    </Pressable>
-  );
-}

package/src/primitives/tabs/types.ts

@@ -1,12 +0,0 @@
-import type { StyleProp, TextStyle } from "react-native";
-import type { TabsPrimitiveListProps } from "./tabs-list";
-import type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
-
-export type TabsState = "default" | "active" | "disabled";
-
-export interface TabsStyles {
-  root?: TabsPrimitiveListProps["style"];
-  list?: TabsPrimitiveListProps["style"];
-  trigger?: Partial<Record<TabsState, TabsPrimitiveTriggerProps["style"]>>;
-  triggerText?: Partial<Record<TabsState, StyleProp<TextStyle>>>;
-}

package/src/primitives/textarea/textarea.tsx

@@ -1,56 +0,0 @@
-import { useState } from "react";
-import { TextInput, type TextInputProps } from "react-native";
-import type { TextareaState, TextareaStyles } from "./types";
-
-export type TextareaPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
-  onChange?: TextInputProps["onChangeText"];
-
-  isDisabled?: boolean;
-};
-
-export interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
-  render?: (props: TextareaPrimitiveProps) => React.ReactNode;
-
-  styles?: TextareaStyles;
-}
-
-const calculateState = (props: TextareaPrimitiveProps, isFocused: boolean): TextareaState => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  if (isFocused) {
-    return "focused";
-  }
-  return "default";
-};
-
-export function TextareaPrimitive(props: TextareaPrimitiveProps) {
-  const [isFocused, setIsFocused] = useState(false);
-  const state = calculateState(props, isFocused);
-
-  const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
-  const composedProps = {
-    ...props.styles?.default,
-    ...props.styles?.[state],
-    ...props,
-  };
-  const Component = props.render ?? TextInput;
-  return (
-    <Component
-      {...composedProps}
-      multiline
-      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}
-    />
-  );
-}

package/src/primitives/textarea/types.ts

@@ -1,5 +0,0 @@
-import { type TextareaPrimitiveBaseProps } from "./textarea";
-
-export type TextareaState = "default" | "focused" | "disabled";
-
-export type TextareaStyles = Partial<Record<TextareaState, TextareaPrimitiveBaseProps>>;

package/src/primitives/toast/index.ts

@@ -1,14 +0,0 @@
-import { ToastRoot } from "./toast-root";
-import { ToastTitle } from "./toast-title";
-import { ToastDescription } from "./toast-description";
-
-export const ToastPrimitive = {
-  Root: ToastRoot,
-  Title: ToastTitle,
-  Description: ToastDescription,
-};
-
-export type { ToastRootProps } from "./toast-root";
-export type { ToastTitleProps } from "./toast-title";
-export type { ToastDescriptionProps } from "./toast-description";
-export type { ToastStyles } from "./types";

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

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

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

@@ -1,28 +0,0 @@
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { ToastContext } from "./context";
-import type { ToastStyles } from "./types";
-
-export interface ToastRootProps {
-  children?: React.ReactNode;
-
-  render?: (props: ToastRootProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-  styles?: ToastStyles;
-}
-
-export function ToastRoot(props: ToastRootProps) {
-  const composedStyle = [props.styles?.root, props.style];
-
-  const Component = props.render ?? View;
-  return (
-    <ToastContext.Provider
-      value={{
-        styles: props.styles,
-      }}
-    >
-      <Component {...props} style={composedStyle} />
-    </ToastContext.Provider>
-  );
-}

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useToast } from "./context";
-
-export interface ToastTitleProps {
-  children?: string;
-
-  render?: (props: ToastTitleProps) => React.ReactNode;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function ToastTitle(props: ToastTitleProps) {
-  const toast = useToast();
-
-  const composedStyle = [toast.styles?.title, props.style];
-
-  const Component = props.render ?? Text;
-  return <Component {...props} style={composedStyle} />;
-}

package/src/primitives/toast/types.ts

@@ -1,9 +0,0 @@
-import type { ToastDescriptionProps } from "./toast-description";
-import type { ToastRootProps } from "./toast-root";
-import type { ToastTitleProps } from "./toast-title";
-
-export interface ToastStyles {
-  root?: ToastRootProps["style"];
-  title?: ToastTitleProps["style"];
-  description?: ToastDescriptionProps["style"];
-}