@korsolutions/ui 0.0.50 → 0.0.52

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

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

@@ -0,0 +1,61 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React, { useEffect, useState } from "react";
+import { Pressable, Text } from "react-native";
+import { useSelect } from "../context";
+import type { SelectOptionState, SelectState } from "../types";
+
+export type SelectOptionProps = {
+  value: string;
+  children?: React.ReactNode;
+};
+
+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): React.ReactElement {
+  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");
+
+  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 = typeof props.children === "string" ? Text : Pressable;
+
+  return (
+    <Component
+      onPress={() => {
+        select.onChange?.(props.value);
+        select.setIsOpen(false);
+      }}
+      onPointerEnter={() => {
+        setIsHovered(true);
+      }}
+      onPointerLeave={() => {
+        setIsHovered(false);
+      }}
+      style={composedStyles}
+    >
+      {props.children}
+    </Component>
+  );
+}

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

@@ -0,0 +1,32 @@
+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/components/select/components/select-portal.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { Portal } from "../../portal";
+import { SelectContext, useSelect } 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/components/select/components/select-root.tsx

@@ -0,0 +1,70 @@
+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 } from "../types";
+import { SelectVariants } from "../variants";
+
+interface SelectRootInjectedProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface SelectRootBaseProps {
+  variant?: keyof typeof SelectVariants;
+
+  value?: string;
+  onChange?: (value: string) => void;
+
+  isDisabled?: boolean;
+}
+
+export interface SelectRootProps extends SelectRootBaseProps {
+  children?: React.ReactNode;
+
+  render?: (props: SelectRootInjectedProps) => React.ReactElement;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (props: SelectRootProps): SelectState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  return "default";
+};
+
+export function SelectRoot(props: SelectRootProps) {
+  const variantStyles = SelectVariants[props.variant ?? "default"]();
+
+  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(variantStyles, state, "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <SelectContext.Provider
+      value={{
+        value: props.value,
+        onChange: props.onChange,
+        isOpen,
+        setIsOpen,
+        triggerPosition,
+        setTriggerPosition,
+        contentLayout,
+        setContentLayout,
+        options,
+        setOptions,
+        state,
+        isDisabled: props.isDisabled ?? false,
+        styles: variantStyles,
+      }}
+    >
+      <Component style={composedStyles}>{props.children}</Component>
+    </SelectContext.Provider>
+  );
+}

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

@@ -0,0 +1,53 @@
+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, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { useSelect } from "../context";
+
+export interface SelectTriggerProps {
+  placeholder?: string;
+  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}>
+      <SelectValue placeholder={props.placeholder} />
+    </Pressable>
+  );
+}
+
+export interface SelectValueProps {
+  placeholder?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+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");
+  if (typeof selectedOptionLabel !== "string") {
+    return <>{selectedOptionLabel}</>;
+  }
+  return <Text style={composedStyles}>{selectedOptionLabel ?? props.placeholder}</Text>;
+}

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