@korsolutions/ui 0.0.85 → 0.0.87

package/src/components/sidebar/types.ts

@@ -0,0 +1,31 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { IconProps } from "../icon";
+
+export type SidebarState = "expanded" | "collapsed";
+
+export type SidebarMenuButtonState = "default" | "active" | "hovered";
+
+export interface SidebarStyles {
+  /** The sidebar container */
+  root?: StyleProp<ViewStyle>;
+  /** Header (sticky top) */
+  header?: StyleProp<ViewStyle>;
+  /** Footer (sticky bottom) */
+  footer?: StyleProp<ViewStyle>;
+  /** Scrollable content area */
+  content?: StyleProp<ViewStyle>;
+  /** Group container */
+  group?: StyleProp<ViewStyle>;
+  /** Group label text */
+  groupLabel?: StyleProp<TextStyle>;
+  /** Menu list container */
+  menu?: StyleProp<ViewStyle>;
+  /** Menu item */
+  menuItem?: Partial<Record<SidebarMenuButtonState, StyleProp<ViewStyle>>>;
+  /** Menu item text */
+  menuItemText?: Partial<Record<SidebarMenuButtonState, StyleProp<TextStyle>>>;
+  /** Menu item icon */
+  menuItemIcon?: Partial<Record<SidebarMenuButtonState, IconProps>>;
+  /** Submenu container */
+  menuSub?: StyleProp<ViewStyle>;
+}

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

@@ -0,0 +1,96 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SidebarStyles } from "../types";
+
+export function useSidebarVariantDefault(): SidebarStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize, spacing }): SidebarStyles => ({
+      root: {
+        height: "100%",
+        flexShrink: 0,
+        flexDirection: "column",
+        backgroundColor: colors.surface,
+        borderColor: colors.border,
+        overflow: "hidden",
+      },
+      header: {
+        paddingHorizontal: spacing * 2,
+        paddingTop: spacing * 2,
+        paddingBottom: spacing,
+      },
+      footer: {
+        paddingHorizontal: spacing * 2,
+        paddingTop: spacing,
+        paddingBottom: spacing * 2,
+      },
+      content: {
+        flex: 1,
+        paddingHorizontal: spacing * 2,
+      },
+      group: {
+        paddingVertical: spacing,
+        gap: spacing * 0.5,
+      },
+      groupLabel: {
+        fontFamily,
+        fontSize: fontSize * 0.75,
+        fontWeight: "500",
+        color: colors.mutedForeground,
+        paddingHorizontal: spacing,
+        paddingVertical: spacing * 0.5,
+        letterSpacing: 0.5,
+        textTransform: "uppercase",
+      },
+      menu: {
+        gap: 1,
+      },
+      menuItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: spacing,
+          paddingVertical: spacing,
+          paddingHorizontal: spacing * 1.5,
+          borderRadius: radius,
+          minHeight: 36,
+        },
+        active: {
+          backgroundColor: colors.muted,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+          opacity: 0.8,
+        },
+      },
+      menuItemText: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * 0.875,
+          fontWeight: "500",
+          color: colors.foreground,
+          lineHeight: fontSize * 1.25,
+          flex: 1,
+        },
+        active: {
+          color: colors.primary,
+        },
+        hovered: {},
+      },
+      menuItemIcon: {
+        default: {
+          color: colors.foreground,
+          size: fontSize * 1.25,
+        },
+        active: {
+          color: colors.primary,
+        },
+      },
+      menuSub: {
+        paddingLeft: spacing * 3,
+        gap: 1,
+        borderLeftWidth: 1,
+        borderLeftColor: colors.border,
+        marginLeft: spacing * 2,
+      },
+    }),
+  );
+}

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

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

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> = {
@@ -59,6 +60,7 @@ import type { ProgressStyles } from "../components/progress/types";
 import type { RadioGroupStyles } from "../components/radio-group/types";
 import type { SelectStyles } from "../components/select/types";
 import type { SeparatorStyles } from "../components/separator/types";
+import type { SidebarStyles } from "../components/sidebar/types";
 import type { SpinnerStyles } from "../components/spinner/types";
 import type { TableStyles } from "../components/table/types";
 import type { TabsStyles } from "../components/tabs/types";
@@ -135,6 +137,9 @@ export interface ComponentsConfig {
   separator?: {
     styles?: SeparatorStyles;
   };
+  sidebar?: {
+    styles?: SidebarStyles;
+  };
   spinner?: {
     styles?: SpinnerStyles;
   };

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

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

@@ -1,5 +1,8 @@
 import { useTheme } from "../themes";
 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;
@@ -7,6 +10,9 @@ 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 => {
@@ -17,5 +23,7 @@ export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T =>
     fontFamily: theme.fontFamily,
     letterSpacing: theme.letterSpacing,
     fontSize: theme.fontSize,
+    spacing: theme.spacing,
+    sizeScale: (size: Size) => getSizeScale(size, theme.spacing, theme.fontSize),
   });
 };