@korsolutions/ui 0.0.49 → 0.0.51

package/src/components/select/context.ts

@@ -0,0 +1,33 @@
+import type { LayoutPosition } from "@/hooks";
+import { createContext, type Dispatch, useContext } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { SelectOption, SelectState, SelectStyles } from "./types";
+
+export interface SelectContext {
+  value?: string;
+  onChange?: (value: string) => void;
+
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+  options: Array<SelectOption>;
+  setOptions: Dispatch<React.SetStateAction<Array<SelectOption>>>;
+
+  isDisabled: boolean;
+
+  state: SelectState;
+  styles: SelectStyles | null;
+}
+
+export const SelectContext = createContext<SelectContext | undefined>(undefined);
+
+export const useSelect = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelect must be used within a SelectProvider");
+  }
+  return context;
+};

package/src/components/select/index.ts

@@ -0,0 +1,23 @@
+import { SelectContent } from "./components/select-content";
+import { SelectOption } from "./components/select-option";
+import { SelectOverlay } from "./components/select-overlay";
+import { SelectPortal } from "./components/select-portal";
+import { SelectRoot } from "./components/select-root";
+import { SelectTrigger } from "./components/select-trigger";
+
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Portal: SelectPortal,
+  Overlay: SelectOverlay,
+  Content: SelectContent,
+  Option: SelectOption,
+};
+
+export type { SelectContentProps } from "./components/select-content";
+export type { SelectOptionProps } from "./components/select-option";
+export type { SelectOverlayProps } from "./components/select-overlay";
+export type { SelectPortalProps } from "./components/select-portal";
+export type { SelectRootBaseProps, SelectRootProps } from "./components/select-root";
+export type { SelectTriggerProps } from "./components/select-trigger";
+export type { SelectStyles } from "./types";

package/src/components/select/types.ts

@@ -0,0 +1,23 @@
+import type { TextStyle } from "react-native";
+import type { SelectContentProps } from "./components/select-content";
+import type { SelectOverlayProps } from "./components/select-overlay";
+import type { SelectRootProps } from "./components/select-root";
+import type { SelectTriggerProps, SelectValueProps } from "./components/select-trigger";
+
+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, TextStyle>>;
+}
+
+export interface SelectOption {
+  value: string;
+  label: React.ReactNode;
+}

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

@@ -1,4 +1,4 @@
-import { type SelectStyles } from "@/primitives";
+import { type SelectStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useSelectVariantDefault(): SelectStyles {
@@ -16,7 +16,7 @@ export function useSelectVariantDefault(): SelectStyles {
           justifyContent: "center",
           paddingVertical: 12,
           paddingHorizontal: 16,
-          height: 48,
+          minHeight: 48,
         },
         disabled: {
           backgroundColor: colors.muted,
@@ -76,6 +76,6 @@ export function useSelectVariantDefault(): SelectStyles {
           backgroundColor: colors.muted,
         },
       },
-    })
+    }),
   );
 }

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

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

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

@@ -0,0 +1,34 @@
+import React, { useMemo } from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { TabsContext } from "../context";
+import { TabsVariants } from "../variants";
+
+export interface TabsRootProps extends Omit<ViewProps, "children"> {
+  variant?: keyof typeof TabsVariants;
+  children: React.ReactNode;
+  value: string;
+  onChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TabsRoot(props: TabsRootProps) {
+  const { children, value, onChange, style, ...viewProps } = props;
+  const variantStyles = TabsVariants[props.variant || "default"]();
+
+  const contextValue = useMemo(
+    () => ({
+      value,
+      onChange,
+      styles: variantStyles,
+    }),
+    [value, onChange, variantStyles],
+  );
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <View {...viewProps} style={style}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useTabsContext } from "../context";
+
+export interface TabsTriggerTextProps extends TextProps {
+  children: React.ReactNode;
+  value: string;
+  isDisabled?: boolean;
+  style?: StyleProp<TextStyle>;
+}
+
+export function TabsTriggerText(props: TabsTriggerTextProps) {
+  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/components/tabs/components/tabs-trigger.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useTabsContext } from "../context";
+import type { TabsState } from "../types";
+
+export interface TabsTriggerProps 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: TabsTriggerProps) {
+  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/components/tabs/context.ts

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

package/src/components/tabs/index.ts

@@ -1,2 +1,17 @@
-export { Tabs, type Tab } from "./tabs";
-export { TabsVariants } from "./variants";
+import { TabsList } from "./components/tabs-list";
+import { TabsRoot } from "./components/tabs-root";
+import { TabsTrigger } from "./components/tabs-trigger";
+import { TabsTriggerText } from "./components/tabs-trigger-text";
+
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  TriggerText: TabsTriggerText,
+};
+
+export type { TabsListProps } from "./components/tabs-list";
+export type { TabsRootProps } from "./components/tabs-root";
+export type { TabsTriggerProps } from "./components/tabs-trigger";
+export type { TabsTriggerTextProps } from "./components/tabs-trigger-text";
+export * from "./types";

package/src/components/tabs/types.ts

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

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

@@ -1,4 +1,4 @@
-import { type TabsStyles } from "@/primitives";
+import { type TabsStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useTabsVariantDefault = (): TabsStyles => {
@@ -43,6 +43,6 @@ export const useTabsVariantDefault = (): TabsStyles => {
           color: colors.mutedForeground,
         },
       },
-    })
+    }),
   );
 };

package/src/components/tabs/variants/line.tsx

@@ -1,4 +1,4 @@
-import { type TabsStyles } from "@/primitives";
+import { type TabsStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useTabsVariantLine = (): TabsStyles => {
@@ -38,6 +38,6 @@ export const useTabsVariantLine = (): TabsStyles => {
           color: colors.mutedForeground,
         },
       },
-    })
+    }),
   );
 };

package/src/components/textarea/textarea.tsx

@@ -1,14 +1,58 @@
-import { TextareaPrimitive, type TextareaPrimitiveBaseProps } from "@/primitives";
-import React from "react";
+import { useState } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import type { TextareaState } from "./types";
 import { TextareaVariants } from "./variants";
 
-export interface TextareaProps extends TextareaPrimitiveBaseProps {
+export type TextareaBaseProps = Omit<TextInputProps, "onChange"> & {
+  onChange?: TextInputProps["onChangeText"];
+
+  isDisabled?: boolean;
+};
+
+export interface TextareaProps extends TextareaBaseProps {
   variant?: keyof typeof TextareaVariants;
+  render?: (props: TextareaProps) => React.ReactNode;
 }
 
+const calculateState = (props: TextareaProps, isFocused: boolean): TextareaState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
 export function Textarea(props: TextareaProps) {
-  const useVariantStyles = TextareaVariants[props.variant ?? "default"];
-  const variantStyles = useVariantStyles();
+  const variantStyles = TextareaVariants[props.variant ?? "default"]();
+
+  const [isFocused, setIsFocused] = useState(false);
+  const state = calculateState(props, isFocused);
 
-  return <TextareaPrimitive {...props} styles={variantStyles} />;
+  const composedStyles = [variantStyles.default?.style, variantStyles[state]?.style, props.style];
+  const composedProps = {
+    ...variantStyles.default,
+    ...variantStyles[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/components/textarea/types.ts

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

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

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

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

@@ -0,0 +1,20 @@
+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/components/toast/components/toast-icon.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
+import React from "react";
+import { useToast } from "../context";
+
+export type ToastIconProps = SvgProps;
+
+export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRender<ToastIconProps>) {
+  const toast = useToast();
+
+  const composedProps = {
+    ...toast.styles?.icon,
+    ...props,
+    style: [toast.styles?.icon?.style, props.style],
+  };
+
+  return <Component absoluteStrokeWidth {...composedProps} />;
+}

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

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

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

@@ -0,0 +1,20 @@
+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/components/toast/index.ts

@@ -1,7 +1,3 @@
-import { ToastComponent } from "./toast";
-import { ToastAPI } from "./toast-manager";
+import { ToastAPI } from "./manager";
 
-export const Toast = Object.assign(ToastComponent, {
-  show: ToastAPI.show,
-  dismiss: ToastAPI.dismiss,
-});
+export const Toast = ToastAPI;

package/src/components/toast/manager.tsx

@@ -0,0 +1,120 @@
+import { Portal } from "@/components/portal";
+import { useSafeAreaInsets } from "@/safe-area";
+import React, { useSyncExternalStore } from "react";
+import { StyleSheet, View } from "react-native";
+import { ToastDescription } from "./components/toast-description";
+import { ToastRoot } from "./components/toast-root";
+import { ToastTitle } from "./components/toast-title";
+import { ToastVariants } from "./variants";
+
+export const TOAST_PORTAL_NAME = "toast-portal";
+
+export interface ToastConfig {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: keyof typeof ToastVariants;
+  duration?: number;
+}
+
+type ToastStore = {
+  toasts: ToastConfig[];
+  listeners: Set<() => void>;
+};
+
+const store: ToastStore = {
+  toasts: [],
+  listeners: new Set(),
+};
+
+function emit() {
+  for (const cb of store.listeners) cb();
+}
+
+function getSnapshot() {
+  return store.toasts;
+}
+
+function subscribe(cb: () => void) {
+  store.listeners.add(cb);
+  return () => {
+    store.listeners.delete(cb);
+  };
+}
+
+function addToast(config: ToastConfig): string {
+  // Check if toast with this ID already exists
+  const existingToast = store.toasts.find((t) => t.id === config.id);
+  if (existingToast) {
+    return existingToast.id;
+  }
+
+  const toast: ToastConfig = {
+    duration: 3000,
+    ...config,
+  };
+
+  store.toasts = [...store.toasts, toast];
+  emit();
+
+  // Auto-dismiss after duration
+  if (toast.duration) {
+    setTimeout(() => {
+      removeToast(toast.id);
+    }, toast.duration);
+  }
+
+  return toast.id;
+}
+
+function removeToast(id: string): void {
+  store.toasts = store.toasts.filter((t) => t.id !== id);
+  emit();
+}
+
+export const ToastAPI = {
+  show: addToast,
+  dismiss: removeToast,
+};
+
+export function ToastContainer() {
+  const toasts = useSyncExternalStore(subscribe, getSnapshot);
+  const insets = useSafeAreaInsets();
+
+  if (!toasts.length) return null;
+
+  return (
+    <Portal name={TOAST_PORTAL_NAME}>
+      <View style={[s.wrapper, { top: insets.top + 24 }]}>
+        {toasts.map((toast) => (
+          <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
+        ))}
+      </View>
+    </Portal>
+  );
+}
+
+interface ToastProps {
+  title: string;
+  description?: string;
+
+  variant?: keyof typeof ToastVariants;
+}
+
+export function ToastComponent(props: ToastProps) {
+  return (
+    <ToastRoot variant={props.variant}>
+      <ToastTitle>{props.title}</ToastTitle>
+      {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
+    </ToastRoot>
+  );
+}
+
+const s = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    alignItems: "center",
+    position: "absolute",
+    gap: 8,
+  },
+});

package/src/components/toast/types.ts

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

package/src/components/toast/variants/danger.tsx

@@ -1,5 +1,5 @@
-import { type ToastStyles } from "@/primitives";
 import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type ToastStyles } from "../types";
 
 export const useToastVariantDanger = (): ToastStyles => {
   return useThemedStyles(
@@ -13,6 +13,14 @@ export const useToastVariantDanger = (): ToastStyles => {
         gap: 4,
         minWidth: 300,
         maxWidth: 400,
+        flexDirection: "row",
+      },
+      icon: {
+        color: colors.foreground,
+        size: 20,
+        style: {
+          marginTop: 2,
+        },
       },
       title: {
         color: colors.foreground,
@@ -26,6 +34,6 @@ export const useToastVariantDanger = (): ToastStyles => {
         fontFamily,
         opacity: 0.9,
       },
-    })
+    }),
   );
 };