@korsolutions/ui 0.0.85 → 0.0.86

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

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ComboboxStyles } from "../types";
 
-export function useComboboxVariantDefault(): ComboboxStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): ComboboxStyles => ({
+export function useComboboxVariantDefault(size: Size): ComboboxStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): ComboboxStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {},
         disabled: {},
@@ -20,10 +23,10 @@ export function useComboboxVariantDefault(): ComboboxStyles {
             backgroundColor: colors.surface,
             justifyContent: "center",
             paddingVertical: 4,
-            paddingHorizontal: 16,
-            minHeight: 48,
+            paddingHorizontal: s.paddingHorizontal,
+            minHeight: s.height,
             fontFamily,
-            fontSize,
+            fontSize: s.fontSize,
             color: colors.foreground,
             outlineWidth: 0,
             pointerEvents: "auto",
@@ -69,10 +72,10 @@ export function useComboboxVariantDefault(): ComboboxStyles {
       },
       option: {
         default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingVertical: s.paddingVertical,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
           borderRadius: radius / 2,
         },
@@ -88,15 +91,15 @@ export function useComboboxVariantDefault(): ComboboxStyles {
       },
       empty: {
         default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingVertical: s.paddingVertical,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.mutedForeground,
           textAlign: "center",
         },
         disabled: {},
       },
-    }),
-  );
+    };
+  });
 }

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

@@ -9,14 +9,15 @@ import {
 import { useComponentConfig } from "../../themes/provider";
 import type { SvgProps } from "../../types/props.types";
 import { mergeStyles } from "../../utils/calculate-styles";
+import type { Size } from "../../utils/size-scale";
 import type { IconButtonState } from "./types";
 import { IconButtonVariants } from "./variants";
 
 export interface IconButtonProps extends Omit<PressableProps, "disabled" | "children"> {
   render: (props: SvgProps) => React.ReactNode;
   variant?: keyof typeof IconButtonVariants;
+  size?: Size;
   isDisabled?: boolean;
-  size?: number;
   color?: SvgProps["color"];
   strokeWidth?: number;
   style?: StyleProp<ViewStyle>;
@@ -37,15 +38,15 @@ export function IconButton(props: IconButtonProps) {
   const {
     render: IconComponent,
     variant = "default",
+    size = "md",
     isDisabled,
-    size,
     color,
     strokeWidth,
     style,
     ...rest
   } = props;
 
-  const variantStyles = IconButtonVariants[variant]();
+  const variantStyles = IconButtonVariants[variant](size);
   const componentConfig = useComponentConfig("iconButton");
   const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
@@ -61,10 +62,9 @@ export function IconButton(props: IconButtonProps) {
   };
 
   const iconProps: SvgProps = {
-    size: size ?? mergedStyles.icon?.default?.size,
+    size: mergedStyles.icon?.default?.size,
     color: color ?? mergedStyles.icon?.[state]?.color ?? mergedStyles.icon?.default?.color,
-    strokeWidth,
-    absoluteStrokeWidth: true,
+    strokeWidth: strokeWidth ?? mergedStyles.icon?.default?.strokeWidth,
   };
 
   return (

package/src/components/icon-button/variants/default.tsx

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantDefault = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantDefault = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           backgroundColor: colors.primary,
           borderWidth: 1,
@@ -25,8 +29,10 @@ export const useIconButtonVariantDefault = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.primaryForeground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
       },
-    }),
-  );
+    };
+  });
 };

package/src/components/icon-button/variants/ghost.tsx

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantGhost = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantGhost = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           backgroundColor: "transparent",
         },
@@ -23,11 +27,13 @@ export const useIconButtonVariantGhost = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.foreground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

package/src/components/icon-button/variants/secondary.tsx

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantSecondary = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantSecondary = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           borderWidth: 1,
           borderColor: colors.border,
@@ -25,11 +29,13 @@ export const useIconButtonVariantSecondary = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.secondaryForeground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

package/src/components/input/input.tsx

@@ -3,12 +3,14 @@ import { StyleSheet, TextInput, type TextInputProps } from "react-native";
 import { useComponentConfig } from "../../themes/provider";
 import type { TextInputRef } from "../../types/element.types";
 import { mergeStyles } from "../../utils/calculate-styles";
+import type { Size } from "../../utils/size-scale";
 import { useFieldOptional } from "../field/context";
 import type { InputState } from "./types";
 import { InputVariants } from "./variants";
 
 export type InputProps = Omit<TextInputProps, "onChange" | "onChangeText"> & {
   variant?: keyof typeof InputVariants;
+  size?: Size;
 
   ref?: React.Ref<TextInputRef>;
   onChange?: TextInputProps["onChangeText"];
@@ -26,7 +28,7 @@ const calculateState = (props: InputProps, isFocused: boolean): InputState => {
 };
 
 export const Input = forwardRef<TextInputRef, InputProps>((props, ref) => {
-  const variantStyles = InputVariants[props.variant || "default"]();
+  const variantStyles = InputVariants[props.variant || "default"](props.size ?? "md");
   const componentConfig = useComponentConfig("input");
   const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isFocused, setIsFocused] = useState(false);

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

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type InputStyles } from "../types";
 
-export function useInputVariantDefault(): InputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
+export function useInputVariantDefault(size: Size): InputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): InputStyles => {
+    const s = sizeScale(size);
+
+    return {
       default: {
         placeholderTextColor: colors.mutedForeground,
         selectionColor: colors.primary,
@@ -13,11 +16,10 @@ export function useInputVariantDefault(): InputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
-          height: 48,
+          fontSize: s.fontSize,
+          height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
           ...Platform.select({
@@ -39,6 +41,6 @@ export function useInputVariantDefault(): InputStyles {
           backgroundColor: colors.muted,
         },
       },
-    }),
-  );
+    };
+  });
 }

package/src/components/input/variants/secondary.tsx

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
-import { type InputStyles } from "../..";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type InputStyles } from "../types";
 
-export function useInputVariantSecondary(): InputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
+export function useInputVariantSecondary(size: Size): InputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): InputStyles => {
+    const s = sizeScale(size);
+
+    return {
       default: {
         placeholderTextColor: colors.mutedForeground,
         selectionColor: colors.primary,
@@ -13,11 +16,10 @@ export function useInputVariantSecondary(): InputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.background,
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
-          height: 48,
+          fontSize: s.fontSize,
+          height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
           ...Platform.select({
@@ -39,6 +41,6 @@ export function useInputVariantSecondary(): InputStyles {
           backgroundColor: colors.muted,
         },
       },
-    }),
-  );
+    };
+  });
 }

package/src/components/phone-input/components/phone-input-root.tsx

@@ -5,6 +5,7 @@ import { usePhoneMask } from "../../../hooks/use-phone-mask";
 import { useComponentConfig } from "../../../themes/provider";
 import type { ViewRef } from "../../../types/element.types";
 import { mergeStyles } from "../../../utils/calculate-styles";
+import type { Size } from "../../../utils/size-scale";
 import { PhoneInputContext } from "../context";
 import type { PhoneInputState } from "../types";
 import { PhoneInputVariants } from "../variants";
@@ -17,6 +18,7 @@ export interface PhoneInputRootProps {
   countryCodes?: CountryCode[];
   isDisabled?: boolean;
   variant?: keyof typeof PhoneInputVariants;
+  size?: Size;
   placeholder?: string;
   style?: StyleProp<ViewStyle>;
 }
@@ -35,9 +37,10 @@ export function PhoneInputRoot({
   countryCodes = ["US"],
   isDisabled = false,
   variant = "default",
+  size = "md",
   style,
 }: PhoneInputRootProps) {
-  const variantStyles = PhoneInputVariants[variant]();
+  const variantStyles = PhoneInputVariants[variant](size);
   const componentConfig = useComponentConfig("phoneInput");
   const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isFocused, setIsFocused] = useState(false);

package/src/components/phone-input/variants/default.tsx

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { PhoneInputStyles } from "../types";
 
-export function usePhoneInputVariantDefault(): PhoneInputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): PhoneInputStyles => ({
+export function usePhoneInputVariantDefault(size: Size): PhoneInputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): PhoneInputStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           flexDirection: "row",
@@ -13,7 +16,7 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          height: 48,
+          height: s.height,
           overflow: "hidden",
           outlineWidth: 0,
         },
@@ -26,18 +29,18 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       },
       countryButton: {
         default: {
-          paddingHorizontal: 12,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           height: "100%",
           justifyContent: "center",
           alignItems: "center",
           flexDirection: "row",
-          gap: 4,
+          gap: s.gap * 0.5,
         },
       },
       countryButtonText: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
         },
         disabled: {
@@ -55,9 +58,9 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       input: {
         default: {
           flex: 1,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
           height: "100%",
           outlineWidth: 0,
@@ -87,12 +90,12 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       },
       pickerOption: {
         default: {
-          paddingVertical: 10,
-          paddingHorizontal: 12,
+          paddingVertical: s.paddingVertical * 0.75,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           borderRadius: radius / 2,
           flexDirection: "row",
           alignItems: "center",
-          gap: 8,
+          gap: s.gap,
         },
         selected: {
           backgroundColor: colors.muted,
@@ -101,7 +104,7 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
       pickerOptionText: {
         default: {
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
         },
       },
@@ -110,15 +113,15 @@ export function usePhoneInputVariantDefault(): PhoneInputStyles {
           borderWidth: 1,
           borderColor: colors.border,
           borderRadius: radius,
-          paddingVertical: 8,
-          paddingHorizontal: 12,
+          paddingVertical: s.paddingVertical * 0.5,
+          paddingHorizontal: s.paddingHorizontal * 0.75,
           fontFamily,
-          fontSize: fontSize * 0.875,
+          fontSize: s.fontSize * 0.875,
           color: colors.foreground,
           marginBottom: 4,
           outlineWidth: 0,
         },
       },
-    }),
-  );
+    };
+  });
 }

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

@@ -3,6 +3,7 @@ import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "reac
 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";
@@ -13,6 +14,7 @@ interface SelectRootInjectedProps {
 
 export interface SelectRootBaseProps {
   variant?: keyof typeof SelectVariants;
+  size?: Size;
 
   value?: string;
   onChange?: (value: string) => void;
@@ -36,7 +38,7 @@ 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);
 

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/index.tsx

@@ -49,3 +49,5 @@ export * from "./themes/types";
 export * from "./components";
 
 export * from "./safe-area";
+export type { Size } from "./utils/size-scale";
+export type { SvgProps } from "./types/props.types";

package/src/themes/default/index.ts

@@ -7,6 +7,7 @@ export const defaultThemeAssets: ThemeAssets = {
     dark: darkColors,
   },
   radius: 10,
+  spacing: 6,
   fontFamily: "System",
   letterSpacing: 0,
   fontSize: 16,

package/src/themes/provider.tsx

@@ -21,6 +21,7 @@ interface ThemeContext {
   colorScheme: ColorScheme;
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
+  spacing: number;
   setColorScheme: (scheme: ColorScheme) => void;
   components?: ComponentsConfig;
 }
@@ -52,6 +53,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
         fontFamily: themeAssets.fontFamily,
         letterSpacing: themeAssets.letterSpacing,
         fontSize: themeAssets.fontSize,
+        spacing: themeAssets.spacing,
         components,
       }}
     >

package/src/themes/types.ts

@@ -30,6 +30,7 @@ export interface ThemeAssets {
   fontFamily: FontFamily;
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
+  spacing: number;
 }
 
 export type StorageClient<T> = {

package/src/themes/utils.ts

@@ -14,5 +14,6 @@ export function mergeThemeAssets(
     fontFamily: override.fontFamily ?? base.fontFamily,
     letterSpacing: override.letterSpacing ?? base.letterSpacing,
     fontSize: override.fontSize ?? base.fontSize,
+    spacing: override.spacing ?? base.spacing,
   };
 }

package/src/utils/size-scale.ts

@@ -0,0 +1,45 @@
+export type Size = "sm" | "md" | "lg";
+
+interface SizeScaleValues {
+  /** spacing * 1 | 1.5 | 2 */
+  paddingVertical: number;
+  /** spacing * 1.5 | 2 | 3 */
+  paddingHorizontal: number;
+  /** spacing * 0.75 | 1 | 1.25 */
+  gap: number;
+  /** fontSize * 0.875 | 1 | 1.125 */
+  fontSize: number;
+  /** fontSize * 0.875 | 1 | 1.125 (alias for icon sizing) */
+  iconSize: number;
+  /** 1.75 | 2 | 2.25 */
+  strokeWidth: number;
+  /** spacing * 4.5 | 6 | 7.5 */
+  height: number;
+}
+
+const scales: Record<
+  Size,
+  { pv: number; ph: number; gap: number; fontScale: number; sw: number; h: number }
+> = {
+  sm: { pv: 1, ph: 1.5, gap: 0.75, fontScale: 0.875, sw: 1.75, h: 4.5 },
+  md: { pv: 1.5, ph: 2, gap: 1, fontScale: 1, sw: 2, h: 6 },
+  lg: { pv: 2, ph: 3, gap: 1.25, fontScale: 1.125, sw: 2.25, h: 7.5 },
+};
+
+export function getSizeScale(
+  size: Size = "md",
+  spacing: number,
+  fontSize: number,
+): SizeScaleValues {
+  const s = scales[size] ?? scales.md;
+  const scaledFontSize = fontSize * s.fontScale;
+  return {
+    paddingVertical: spacing * s.pv,
+    paddingHorizontal: spacing * s.ph,
+    gap: spacing * s.gap,
+    fontSize: scaledFontSize,
+    iconSize: scaledFontSize,
+    strokeWidth: s.sw,
+    height: spacing * s.h,
+  };
+}