@korsolutions/ui 0.0.84 → 0.0.85

package/src/components/portal/portal.tsx

@@ -9,11 +9,7 @@ import React, {
 import { Platform, View, type HostInstance } from "react-native";
 import { measureLayoutPosition } from "../../utils/normalize-layout";
 import { PortalOffsetContext, type PortalOffset } from "./portal-offset";
-import {
-  DEFAULT_PORTAL_HOST,
-  type PortalHostProps,
-  type PortalProps,
-} from "./portal.constants";
+import { DEFAULT_PORTAL_HOST, type PortalHostProps, type PortalProps } from "./portal.constants";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -24,10 +20,7 @@ type PortalStore = {
 };
 
 const store: PortalStore = {
-  map: new Map<string, PortalMap>().set(
-    DEFAULT_PORTAL_HOST,
-    new Map<string, React.ReactNode>(),
-  ),
+  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
   listeners: new Set(),
 };
 
@@ -46,11 +39,7 @@ function subscribe(cb: () => void) {
   };
 }
 
-function updatePortal(
-  hostName: string,
-  name: string,
-  children: React.ReactNode,
-) {
+function updatePortal(hostName: string, name: string, children: React.ReactNode) {
   const next = new Map(store.map);
   const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
   portal.set(name, children);
@@ -96,17 +85,12 @@ function DefaultContainer(props: React.PropsWithChildren) {
         pointerEvents: "box-none",
       }}
     >
-      <PortalOffsetContext.Provider value={offset}>
-        {props.children}
-      </PortalOffsetContext.Provider>
+      <PortalOffsetContext.Provider value={offset}>{props.children}</PortalOffsetContext.Provider>
     </View>
   );
 }
 
-export function PortalHost({
-  name = DEFAULT_PORTAL_HOST,
-  container,
-}: PortalHostProps) {
+export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
   const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
   const Container = useMemo(
@@ -122,11 +106,7 @@ export function PortalHost({
   return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-export function Portal({
-  name,
-  hostName = DEFAULT_PORTAL_HOST,
-  children,
-}: PortalProps) {
+export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   useEffect(() => {
     updatePortal(hostName, name, children);
   }, [hostName, name, children]);

package/src/components/progress/components/progress-indicator.tsx

@@ -14,8 +14,19 @@ export function ProgressIndicator(props: ProgressIndicatorProps) {
 
   const percentage = Math.min(Math.max((progress.value / progress.max) * 100, 0), 100);
 
-  const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
+  const composedStyle = calculateComposedStyles(
+    progress.styles,
+    progress.state,
+    "indicator",
+    props.style,
+  );
 
   const Component = props.render ?? View;
-  return <Component {...props} percentage={percentage} style={[composedStyle, { width: `${percentage}%` }]} />;
+  return (
+    <Component
+      {...props}
+      percentage={percentage}
+      style={[composedStyle, { width: `${percentage}%` }]}
+    />
+  );
 }

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

@@ -1,6 +1,7 @@
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { calculateComposedStyles, mergeStyles } from "../../../utils/calculate-styles";
 import { ProgressContext } from "../context";
 import { ProgressVariants } from "../variants";
 
@@ -19,14 +20,16 @@ export interface ProgressRootProps {
 export function ProgressRoot(props: ProgressRootProps) {
   const { value = 0, max = 100 } = props;
   const variantStyles = ProgressVariants[props.variant || "default"]();
-  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
+  const componentConfig = useComponentConfig("progress");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
 
   const Component = props.render ?? View;
   return (
     <ProgressContext.Provider
       value={{
         state: "default",
-        styles: variantStyles,
+        styles: mergedStyles,
         value,
         max,
       }}

package/src/components/radio-group/components/radio-group-item.tsx

@@ -30,11 +30,7 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
   const itemDisabled = isDisabled ?? group.isDisabled;
   const state = calculateState(isSelected, itemDisabled, isHovered);
 
-  const composedStyle = [
-    group.styles?.item?.default,
-    group.styles?.item?.[state],
-    style,
-  ];
+  const composedStyle = [group.styles?.item?.default, group.styles?.item?.[state], style];
 
   return (
     <RadioGroupItemContext.Provider value={{ value, state, isSelected }}>

package/src/components/radio-group/components/radio-group-root.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { RadioGroupContext } from "../context";
 import type { RadioGroupState } from "../types";
 import { RadioGroupVariants } from "../variants";
@@ -21,9 +23,11 @@ const calculateState = (isDisabled: boolean | undefined): RadioGroupState => {
 export function RadioGroupRoot(props: RadioGroupRootProps) {
   const { children, value, onChange, isDisabled, style, variant, ...viewProps } = props;
   const variantStyles = RadioGroupVariants[variant ?? "default"]();
+  const componentConfig = useComponentConfig("radioGroup");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const state = calculateState(isDisabled);
-  const composedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
+  const composedStyle = [mergedStyles.root?.default, mergedStyles.root?.[state], style];
 
   const contextValue = React.useMemo(
     () => ({
@@ -31,9 +35,9 @@ export function RadioGroupRoot(props: RadioGroupRootProps) {
       onChange,
       isDisabled,
       state,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [value, onChange, isDisabled, state, variantStyles],
+    [value, onChange, isDisabled, state, mergedStyles],
   );
 
   return (

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

@@ -33,11 +33,7 @@ export function SelectContent(props: SelectContentProps) {
   const Component = props.render ?? View;
   return (
     <Component
-      style={[
-        positionStyle,
-        composedStyles,
-        { width: select.triggerPosition.width },
-      ]}
+      style={[positionStyle, composedStyles, { width: select.triggerPosition.width }]}
       onLayout={(e) => {
         select.setContentLayout(e.nativeEvent.layout);
       }}

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

@@ -9,7 +9,11 @@ export type SelectOptionProps = {
   children?: React.ReactNode;
 };
 
-const calculateState = (selectState: SelectState, hovered: boolean, selected: boolean): SelectOptionState => {
+const calculateState = (
+  selectState: SelectState,
+  hovered: boolean,
+  selected: boolean,
+): SelectOptionState => {
   if (selectState === "disabled") {
     return "disabled";
   }

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

@@ -16,7 +16,12 @@ export interface SelectOverlayProps {
 export function SelectOverlay(props: SelectOverlayProps) {
   const select = useSelect();
 
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "overlay", props.style);
+  const composedStyles = calculateComposedStyles(
+    select.styles,
+    select.state,
+    "overlay",
+    props.style,
+  );
 
   const Component = props.render ?? Pressable;
   return (

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

@@ -31,9 +31,7 @@ export function SelectPortal(props: SelectPortalProps) {
 
   return (
     <Portal name="select-portal">
-      <SelectContext.Provider value={select}>
-        {props.children}
-      </SelectContext.Provider>
+      <SelectContext.Provider value={select}>{props.children}</SelectContext.Provider>
     </Portal>
   );
 }

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

@@ -1,7 +1,8 @@
-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 { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
+import { useComponentConfig } from "../../../themes/provider";
+import { calculateComposedStyles, mergeStyles } from "../../../utils/calculate-styles";
 import { SelectContext } from "../context";
 import type { SelectOption, SelectState } from "../types";
 import { SelectVariants } from "../variants";
@@ -36,6 +37,8 @@ const calculateState = (props: SelectRootProps): SelectState => {
 
 export function SelectRoot(props: SelectRootProps) {
   const variantStyles = SelectVariants[props.variant ?? "default"]();
+  const componentConfig = useComponentConfig("select");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
@@ -43,7 +46,7 @@ export function SelectRoot(props: SelectRootProps) {
   const [options, setOptions] = useState<Array<SelectOption>>([]);
 
   const state = calculateState(props);
-  const composedStyles = calculateComposedStyles(variantStyles, state, "root", props.style);
+  const composedStyles = calculateComposedStyles(mergedStyles, state, "root", props.style);
 
   const Component = props.render ?? View;
   return (
@@ -61,7 +64,7 @@ export function SelectRoot(props: SelectRootProps) {
         setOptions,
         state,
         isDisabled: props.isDisabled ?? false,
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component style={composedStyles}>{props.children}</Component>

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

@@ -1,11 +1,5 @@
 import React, { useRef } from "react";
-import {
-  Pressable,
-  Text,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
+import { Pressable, Text, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import type { ViewRef } from "../../../types/element.types";
 import { calculateComposedStyles } from "../../../utils/calculate-styles";
 import { measureLayoutPosition } from "../../../utils/normalize-layout";
@@ -58,9 +52,7 @@ export interface SelectValueProps {
 export function SelectValue(props: SelectValueProps) {
   const select = useSelect();
 
-  const selectedOption = select.options.find(
-    (option) => option.value === select.value,
-  );
+  const selectedOption = select.options.find((option) => option.value === select.value);
   const selectedOptionLabel = selectedOption?.label;
   const displayValue = selectedOptionLabel ?? select.value;
 
@@ -72,7 +64,5 @@ export function SelectValue(props: SelectValueProps) {
   if (!!displayValue && typeof displayValue !== "string") {
     return <>{displayValue}</>;
   }
-  return (
-    <Text style={composedStyles}>{displayValue ?? props.placeholder}</Text>
-  );
+  return <Text style={composedStyles}>{displayValue ?? props.placeholder}</Text>;
 }

package/src/components/separator/separator.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import { SeparatorVariants } from "./variants";
 
 export interface SeparatorProps {
@@ -10,6 +12,8 @@ export interface SeparatorProps {
 export function Separator(props: SeparatorProps) {
   const { variant = "horizontal", style } = props;
   const variantStyles = SeparatorVariants[variant]();
+  const componentConfig = useComponentConfig("separator");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
-  return <View style={[variantStyles.root, style]} />;
+  return <View style={[mergedStyles.root, style]} />;
 }

package/src/components/spinner/spinner.tsx

@@ -1,10 +1,7 @@
 import React from "react";
-import {
-  ActivityIndicator,
-  type ColorValue,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
+import { ActivityIndicator, type ColorValue, type StyleProp, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import { SpinnerVariants } from "./variants";
 
 export interface SpinnerProps {
@@ -17,12 +14,14 @@ export interface SpinnerProps {
 export function Spinner(props: SpinnerProps) {
   const { size, variant = "default", color, style } = props;
   const styles = SpinnerVariants[variant]();
+  const componentConfig = useComponentConfig("spinner");
+  const mergedStyles = mergeStyles(styles, componentConfig?.styles);
 
   return (
     <ActivityIndicator
-      size={size ?? styles.size}
-      color={color ?? styles.color}
-      style={[styles, style]}
+      size={size ?? mergedStyles.size}
+      color={color ?? mergedStyles.color}
+      style={[mergedStyles, style]}
     />
   );
 }

package/src/components/table/context.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import type { TableState, TableStyles } from "./types";
+
+export interface TableContext {
+  state: TableState;
+  styles?: TableStyles;
+}
+
+export const TableContext = createContext<TableContext | undefined>(undefined);
+
+export const useTable = () => {
+  const context = useContext(TableContext);
+  if (!context) {
+    throw new Error("useTable must be used within a Table.Root");
+  }
+  return context;
+};

package/src/components/table/index.ts

@@ -0,0 +1,23 @@
+import { TableBody } from "./table-body";
+import { TableCell } from "./table-cell";
+import { TableHead } from "./table-head";
+import { TableHeader } from "./table-header";
+import { TableRoot } from "./table-root";
+import { TableRow } from "./table-row";
+
+export const Table = {
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+};
+
+export type { TableBodyProps } from "./table-body";
+export type { TableCellProps } from "./table-cell";
+export type { TableHeadProps } from "./table-head";
+export type { TableHeaderProps } from "./table-header";
+export type { TableRootProps } from "./table-root";
+export type { TableRowProps } from "./table-row";
+export type { TableStyles } from "./types";

package/src/components/table/table-body.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useTable } from "./context";
+
+export interface TableBodyProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableBody(props: PropsWithRender<TableBodyProps>) {
+  const table = useTable();
+
+  const composedStyle = calculateComposedStyles(table.styles, table.state, "body", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/table/table-cell.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useTable } from "./context";
+
+export interface TableCellProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableCell(props: PropsWithRender<TableCellProps>) {
+  const table = useTable();
+
+  const composedStyle = calculateComposedStyles(table.styles, table.state, "cell", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/table/table-head.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useTable } from "./context";
+
+export interface TableHeadProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableHead(props: PropsWithRender<TableHeadProps>) {
+  const table = useTable();
+
+  const composedStyle = calculateComposedStyles(table.styles, table.state, "head", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/table/table-header.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useTable } from "./context";
+
+export interface TableHeaderProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableHeader(props: PropsWithRender<TableHeaderProps>) {
+  const table = useTable();
+
+  const composedStyle = calculateComposedStyles(table.styles, table.state, "header", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles, mergeStyles } from "../../utils/calculate-styles";
+import { TableContext } from "./context";
+import { TableVariants } from "./variants";
+
+export interface TableRootProps {
+  variant?: keyof typeof TableVariants;
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableRoot(props: PropsWithRender<TableRootProps>) {
+  const variantStyles = TableVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("table");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
+  const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <TableContext.Provider
+      value={{
+        state: "default",
+        styles: mergedStyles,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </TableContext.Provider>
+  );
+}

package/src/components/table/table-row.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useTable } from "./context";
+
+export interface TableRowProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function TableRow(props: PropsWithRender<TableRowProps>) {
+  const table = useTable();
+
+  const composedStyle = calculateComposedStyles(table.styles, table.state, "row", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/table/types.ts

@@ -0,0 +1,17 @@
+import type { TableBodyProps } from "./table-body";
+import type { TableCellProps } from "./table-cell";
+import type { TableHeadProps } from "./table-head";
+import type { TableHeaderProps } from "./table-header";
+import type { TableRootProps } from "./table-root";
+import type { TableRowProps } from "./table-row";
+
+export type TableState = "default";
+
+export interface TableStyles {
+  root?: Partial<Record<TableState, TableRootProps["style"]>>;
+  header?: Partial<Record<TableState, TableHeaderProps["style"]>>;
+  body?: Partial<Record<TableState, TableBodyProps["style"]>>;
+  row?: Partial<Record<TableState, TableRowProps["style"]>>;
+  head?: Partial<Record<TableState, TableHeadProps["style"]>>;
+  cell?: Partial<Record<TableState, TableCellProps["style"]>>;
+}

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

@@ -0,0 +1,46 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { TableStyles } from "../types";
+
+export function useTableVariantDefault(): TableStyles {
+  return useThemedStyles(
+    ({ colors, radius }): TableStyles => ({
+      root: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          overflow: "hidden",
+        },
+      },
+      header: {
+        default: {
+          backgroundColor: colors.muted,
+        },
+      },
+      body: {
+        default: {},
+      },
+      row: {
+        default: {
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: colors.border,
+        },
+      },
+      head: {
+        default: {
+          flex: 1,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+        },
+      },
+      cell: {
+        default: {
+          flex: 1,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+        },
+      },
+    }),
+  );
+}

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

@@ -0,0 +1,5 @@
+import { useTableVariantDefault } from "./default";
+
+export const TableVariants = {
+  default: useTableVariantDefault,
+};

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

@@ -35,13 +35,7 @@ const calculateState = (
 };
 
 export function TabsItem(props: TabsItemProps) {
-  const {
-    children,
-    value: triggerValue,
-    isDisabled = false,
-    style,
-    ...pressableProps
-  } = props;
+  const { children, value: triggerValue, isDisabled = false, style, ...pressableProps } = props;
   const { value, onChange, styles } = useTabsContext();
   const [isHovered, setIsHovered] = useState(false);
   const isActive = value === triggerValue;
@@ -53,27 +47,13 @@ export function TabsItem(props: TabsItemProps) {
     }
   };
 
-  const calculatedStyle = StyleSheet.flatten([
-    styles?.item?.default,
-    styles?.item?.[state],
-    style,
-  ]);
+  const calculatedStyle = StyleSheet.flatten([styles?.item?.default, styles?.item?.[state], style]);
 
-  const textStyles = StyleSheet.flatten([
-    styles?.itemText?.default,
-    styles?.itemText?.[state],
-  ]);
+  const textStyles = StyleSheet.flatten([styles?.itemText?.default, styles?.itemText?.[state]]);
 
-  const iconStyles = StyleSheet.flatten([
-    styles?.itemIcon?.default,
-    styles?.itemIcon?.[state],
-  ]);
+  const iconStyles = StyleSheet.flatten([styles?.itemIcon?.default, styles?.itemIcon?.[state]]);
 
-  const organizedChildren = useOrganizedChildren(
-    children,
-    textStyles,
-    iconStyles ?? undefined,
-  );
+  const organizedChildren = useOrganizedChildren(children, textStyles, iconStyles ?? undefined);
 
   return (
     <Pressable