@korsolutions/ui 0.0.84 → 0.0.86

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,9 @@
-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 type { Size } from "../../../utils/size-scale";
 import { SelectContext } from "../context";
 import type { SelectOption, SelectState } from "../types";
 import { SelectVariants } from "../variants";
@@ -12,6 +14,7 @@ interface SelectRootInjectedProps {
 
 export interface SelectRootBaseProps {
   variant?: keyof typeof SelectVariants;
+  size?: Size;
 
   value?: string;
   onChange?: (value: string) => void;
@@ -35,7 +38,9 @@ const calculateState = (props: SelectRootProps): SelectState => {
 };
 
 export function SelectRoot(props: SelectRootProps) {
-  const variantStyles = SelectVariants[props.variant ?? "default"]();
+  const variantStyles = SelectVariants[props.variant ?? "default"](props.size ?? "md");
+  const componentConfig = useComponentConfig("select");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
@@ -43,7 +48,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 +66,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/select/variants/default.tsx

@@ -1,9 +1,12 @@
-import { type SelectStyles } from "../..";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type SelectStyles } from "../types";
 
-export function useSelectVariantDefault(): SelectStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): SelectStyles => ({
+export function useSelectVariantDefault(size: Size): SelectStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): SelectStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {},
         disabled: {},
@@ -15,9 +18,8 @@ export function useSelectVariantDefault(): SelectStyles {
           borderRadius: radius,
           backgroundColor: colors.surface,
           justifyContent: "center",
-          paddingVertical: 12,
-          paddingHorizontal: 16,
-          minHeight: 48,
+          paddingHorizontal: s.paddingHorizontal,
+          minHeight: s.height,
         },
         disabled: {
           backgroundColor: colors.muted,
@@ -26,7 +28,7 @@ export function useSelectVariantDefault(): SelectStyles {
       value: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
         },
         disabled: {
@@ -36,7 +38,7 @@ export function useSelectVariantDefault(): SelectStyles {
       placeholder: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.mutedForeground,
         },
         disabled: {
@@ -63,10 +65,10 @@ export function useSelectVariantDefault(): SelectStyles {
       },
       option: {
         default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingVertical: s.paddingVertical,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
           borderRadius: radius / 2,
         },
@@ -80,6 +82,6 @@ export function useSelectVariantDefault(): SelectStyles {
           backgroundColor: colors.muted,
         },
       },
-    }),
-  );
+    };
+  });
 }

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

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

@@ -1,11 +1,7 @@
 import React, { useMemo } from "react";
-import {
-  StyleSheet,
-  View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle,
-} from "react-native";
+import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { TabsContext } from "../context";
 import { TabsVariants } from "../variants";
 
@@ -20,16 +16,19 @@ export interface TabsRootProps extends Omit<ViewProps, "children"> {
 export function TabsRoot(props: TabsRootProps) {
   const { children, value, onChange, style, ...viewProps } = props;
   const variantStyles = TabsVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("tabs");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const contextValue = useMemo(
     () => ({
       value,
       onChange,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [value, onChange, variantStyles],
+    [value, onChange, mergedStyles],
   );
-  const composedStyles = StyleSheet.flatten([variantStyles?.root, style]);
+  const composedStyles = StyleSheet.flatten([mergedStyles?.root, style]);
 
   return (
     <TabsContext.Provider value={contextValue}>

package/src/components/textarea/textarea.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 import { TextInput, type TextInputProps } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import type { TextareaState } from "./types";
 import { TextareaVariants } from "./variants";
 
@@ -26,14 +28,16 @@ const calculateState = (props: TextareaProps, isFocused: boolean): TextareaState
 
 export function Textarea(props: TextareaProps) {
   const variantStyles = TextareaVariants[props.variant ?? "default"]();
+  const componentConfig = useComponentConfig("textarea");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const [isFocused, setIsFocused] = useState(false);
   const state = calculateState(props, isFocused);
 
-  const composedStyles = [variantStyles.default?.style, variantStyles[state]?.style, props.style];
+  const composedStyles = [mergedStyles.default?.style, mergedStyles[state]?.style, props.style];
   const composedProps = {
-    ...variantStyles.default,
-    ...variantStyles[state],
+    ...mergedStyles.default,
+    ...mergedStyles[state],
     ...props,
   };
   const Component = props.render ?? TextInput;

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

@@ -1,16 +1,10 @@
 import React from "react";
-import type {
-  PropsWithRequiredRender,
-  SvgProps,
-} from "../../../types/props.types";
+import type { PropsWithRequiredRender, SvgProps } from "../../../types/props.types";
 import { useToast } from "../context";
 
 export type ToastIconProps = SvgProps;
 
-export function ToastIcon({
-  render: Component,
-  ...props
-}: PropsWithRequiredRender<SvgProps>) {
+export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRender<SvgProps>) {
   const toast = useToast();
 
   const composedProps = {

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { ToastContext } from "../context";
 import { ToastVariants } from "../variants";
 
@@ -14,13 +16,15 @@ export interface ToastRootProps {
 
 export function ToastRoot(props: ToastRootProps) {
   const variantStyles = ToastVariants[props.variant ?? "default"]();
-  const composedStyle = [variantStyles.root, props.style];
+  const componentConfig = useComponentConfig("toast");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = [mergedStyles.root, props.style];
 
   const Component = props.render ?? View;
   return (
     <ToastContext.Provider
       value={{
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component {...props} style={composedStyle} />

package/src/components/toast/manager.tsx

@@ -1,7 +1,7 @@
 import React, { useSyncExternalStore } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "../../safe-area";
-import { useComponentsConfig } from "../../themes";
+import { useComponentConfig } from "../../themes/provider";
 import { Portal } from "../portal";
 import { ToastBody } from "./components/toast-body";
 import { ToastDescription } from "./components/toast-description";
@@ -110,18 +110,16 @@ interface ToastProps {
 }
 
 export function ToastComponent(props: ToastProps) {
-  const config = useComponentsConfig();
+  const config = useComponentConfig("toast");
   const variant = props.variant ?? "default";
-  const IconComponent = config?.toast?.icons?.[variant];
+  const IconComponent = config?.icons?.[variant];
 
   return (
     <ToastRoot variant={variant}>
       {!!IconComponent && <ToastIcon render={IconComponent} />}
       <ToastBody>
         <ToastTitle>{props.title}</ToastTitle>
-        {!!props.description && (
-          <ToastDescription>{props.description}</ToastDescription>
-        )}
+        {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
       </ToastBody>
     </ToastRoot>
   );