@korsolutions/ui 0.0.84 → 0.0.86

package/src/utils/date-utils.ts

@@ -1,5 +1,18 @@
 export const formatDate = (date: Date, format: string): string => {
-  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
 
   const day = date.getDate();
   const month = months[date.getMonth()];
@@ -19,7 +32,11 @@ export const formatDate = (date: Date, format: string): string => {
 };
 
 export const isDateSameDay = (date1: Date, date2: Date): boolean => {
-  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
 };
 
 export const isDateToday = (date: Date): boolean => {
@@ -38,7 +55,10 @@ export const isDateAfter = (date1: Date, date2: Date): boolean => {
   return d1.getTime() > d2.getTime();
 };
 
-export const isDateTimeWithinInterval = (date: Date, interval: { start: Date; end: Date }): boolean => {
+export const isDateTimeWithinInterval = (
+  date: Date,
+  interval: { start: Date; end: Date },
+): boolean => {
   const time = date.getTime();
   return time >= interval.start.getTime() && time <= interval.end.getTime();
 };

package/src/utils/input-utils.ts

@@ -1,10 +1,7 @@
 import { Platform } from "react-native";
 import type { TextInputRef } from "../types/element.types";
 
-export function setInnerInputValue(
-  element: HTMLInputElement | TextInputRef,
-  value: string,
-) {
+export function setInnerInputValue(element: HTMLInputElement | TextInputRef, value: string) {
   if (Platform.OS === "web") {
     (element as HTMLInputElement).value = value;
   } else {

package/src/utils/normalize-layout.ts

@@ -26,7 +26,9 @@ export const measureLayoutPosition = (
   callback: (layout: LayoutPosition) => void,
 ) => {
   if (ref && "getBoundingClientRect" in ref) {
-    const rect = (ref as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
+    const rect = (
+      ref as unknown as { getBoundingClientRect: () => DOMRect }
+    ).getBoundingClientRect();
     callback({
       height: isValidNumber(rect.height) ? rect.height : 0,
       width: isValidNumber(rect.width) ? rect.width : 0,

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

package/src/utils/use-themed-styles.ts

@@ -1,11 +1,8 @@
 import { useTheme } from "../themes";
-import type {
-  Colors,
-  FontFamily,
-  FontSize,
-  LetterSpacing,
-  Radius,
-} from "../themes/types";
+import type { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "../themes/types";
+import { getSizeScale, type Size } from "./size-scale";
+
+type SizeScale = ReturnType<typeof getSizeScale>;
 
 interface CallbackProps {
   colors: Colors;
@@ -13,11 +10,12 @@ interface CallbackProps {
   fontFamily: FontFamily;
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
+  spacing: number;
+  /** Compute spacing-based size dimensions from a Size token */
+  sizeScale: (size: Size) => SizeScale;
 }
 
-export const useThemedStyles = <T>(
-  callback: (props: CallbackProps) => T,
-): T => {
+export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
   const theme = useTheme();
   return callback({
     colors: theme.colors,
@@ -25,5 +23,7 @@ export const useThemedStyles = <T>(
     fontFamily: theme.fontFamily,
     letterSpacing: theme.letterSpacing,
     fontSize: theme.fontSize,
+    spacing: theme.spacing,
+    sizeScale: (size: Size) => getSizeScale(size, theme.spacing, theme.fontSize),
   });
 };

package/tsconfig.json

@@ -1,17 +1,10 @@
 {
   "compilerOptions": {
-    "customConditions": [
-      "dev-source",
-      "react-native",
-      "react-native-strict-api"
-    ],
+    "customConditions": ["dev-source", "react-native", "react-native-strict-api"],
     "allowJs": true,
     "esModuleInterop": true,
     "jsx": "react-native",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "module": "preserve",
     "moduleDetection": "force",
     "moduleResolution": "bundler",
@@ -30,10 +23,7 @@
     "noStrictGenericChecks": false,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": true
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}
+  "exclude": ["node_modules", "dist"]
+}