@korsolutions/ui 0.0.85 → 0.0.87

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/components/sidebar/components/sidebar-content.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ScrollView, type StyleProp, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarContentProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarContent(props: SidebarContentProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return (
+    <ScrollView style={[sidebar.styles?.content, style]} showsVerticalScrollIndicator={false}>
+      {children}
+    </ScrollView>
+  );
+}

package/src/components/sidebar/components/sidebar-footer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarFooterProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarFooter(props: SidebarFooterProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.footer, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-group-label.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarGroupLabelProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function SidebarGroupLabel(props: SidebarGroupLabelProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <Text style={[sidebar.styles?.groupLabel, style]}>{children}</Text>;
+}

package/src/components/sidebar/components/sidebar-group.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarGroupProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarGroup(props: SidebarGroupProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.group, style]}>{children}</View>;
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarHeader(props: SidebarHeaderProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.header, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-menu-item.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
+import { useSidebar } from "../context";
+import type { SidebarMenuButtonState } from "../types";
+
+export interface SidebarMenuItemProps extends Omit<PressableProps, "style"> {
+  children?: React.ReactNode;
+
+  /** Mark as active item */
+  isActive?: boolean;
+
+  /** Size variant */
+  size?: "default" | "lg";
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenuItem(props: SidebarMenuItemProps) {
+  const { children, isActive, size = "default", style, onPress, ...rest } = props;
+  const sidebar = useSidebar();
+  const [isHovered, setIsHovered] = useState(false);
+  const styles = sidebar.styles;
+
+  const state: SidebarMenuButtonState = isActive ? "active" : isHovered ? "hovered" : "default";
+
+  const textStyle = StyleSheet.flatten([
+    styles?.menuItemText?.default,
+    styles?.menuItemText?.[state],
+  ]);
+
+  const iconProps = StyleSheet.flatten([
+    styles?.menuItemIcon?.default,
+    styles?.menuItemIcon?.[state],
+  ]);
+
+  const organizedChildren = useOrganizedChildren(children, textStyle, iconProps);
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={onPress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      style={[
+        styles?.menuItem?.default,
+        state !== "default" && styles?.menuItem?.[state],
+        size === "lg" && { minHeight: 48, paddingVertical: 8 },
+        style,
+      ]}
+    >
+      {organizedChildren}
+    </Pressable>
+  );
+}

package/src/components/sidebar/components/sidebar-menu-sub.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarMenuSubProps {
+  children?: React.ReactNode;
+
+  /** Whether the submenu is open (controlled) */
+  open?: boolean;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenuSub(props: SidebarMenuSubProps) {
+  const { children, open = true, style } = props;
+  const sidebar = useSidebar();
+
+  if (!open) {
+    return null;
+  }
+
+  return <View style={[sidebar.styles?.menuSub, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-menu.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarMenuProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarMenu(props: SidebarMenuProps) {
+  const { children, style } = props;
+  const sidebar = useSidebar();
+
+  return <View style={[sidebar.styles?.menu, style]}>{children}</View>;
+}

package/src/components/sidebar/components/sidebar-provider.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
+import { SidebarContext, type SidebarContextValue } from "../context";
+import { SidebarVariants } from "../variants";
+
+export interface SidebarProviderProps {
+  children?: React.ReactNode;
+
+  /** Variant key for sidebar theming */
+  variant?: keyof typeof SidebarVariants;
+
+  /** Width of the sidebar in pixels (default: 256) */
+  width?: number;
+
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+
+  /** Open state (controlled) */
+  open?: boolean;
+
+  /** Callback when open state changes (controlled) */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function SidebarProvider(props: SidebarProviderProps) {
+  const {
+    children,
+    variant = "default",
+    width,
+    defaultOpen = true,
+    open: controlledOpen,
+    onOpenChange,
+  } = props;
+
+  const [_open, _setOpen] = useState(defaultOpen);
+
+  const open = controlledOpen ?? _open;
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        _setOpen(value);
+      }
+    },
+    [onOpenChange],
+  );
+
+  const toggleSidebar = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+
+  const variantStyles = SidebarVariants[variant]();
+  const componentConfig = useComponentConfig("sidebar");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = useMemo<SidebarContextValue>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      toggleSidebar,
+      width,
+      styles: mergedStyles,
+    }),
+    [state, open, setOpen, toggleSidebar, width, mergedStyles],
+  );
+
+  return <SidebarContext.Provider value={contextValue}>{children}</SidebarContext.Provider>;
+}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useSidebar } from "../context";
+
+export interface SidebarRootProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SidebarRoot(props: SidebarRootProps) {
+  const { children, style } = props;
+  const { open, width = 256, styles } = useSidebar();
+
+  return (
+    <View style={[styles?.root, { width }, !open && { width: 0, overflow: "hidden" }, style]}>
+      {children}
+    </View>
+  );
+}

package/src/components/sidebar/context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { SidebarState, SidebarStyles } from "./types";
+
+export interface SidebarContextValue {
+  state: SidebarState;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+  width?: number;
+  styles?: SidebarStyles;
+}
+
+export const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};

package/src/components/sidebar/index.ts

@@ -0,0 +1,37 @@
+import { SidebarContent } from "./components/sidebar-content";
+import { SidebarFooter } from "./components/sidebar-footer";
+import { SidebarGroup } from "./components/sidebar-group";
+import { SidebarGroupLabel } from "./components/sidebar-group-label";
+import { SidebarHeader } from "./components/sidebar-header";
+import { SidebarMenuItem } from "./components/sidebar-menu-item";
+import { SidebarMenuSub } from "./components/sidebar-menu-sub";
+import { SidebarMenu } from "./components/sidebar-menu";
+import { SidebarProvider } from "./components/sidebar-provider";
+import { SidebarRoot } from "./components/sidebar-root";
+
+export const Sidebar = {
+  Provider: SidebarProvider,
+  Root: SidebarRoot,
+  Header: SidebarHeader,
+  Footer: SidebarFooter,
+  Content: SidebarContent,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem,
+  MenuSub: SidebarMenuSub,
+};
+
+export { useSidebar } from "./context";
+
+export type { SidebarProviderProps } from "./components/sidebar-provider";
+export type { SidebarRootProps } from "./components/sidebar-root";
+export type { SidebarHeaderProps } from "./components/sidebar-header";
+export type { SidebarFooterProps } from "./components/sidebar-footer";
+export type { SidebarContentProps } from "./components/sidebar-content";
+export type { SidebarGroupProps } from "./components/sidebar-group";
+export type { SidebarGroupLabelProps } from "./components/sidebar-group-label";
+export type { SidebarMenuProps } from "./components/sidebar-menu";
+export type { SidebarMenuItemProps } from "./components/sidebar-menu-item";
+export type { SidebarMenuSubProps } from "./components/sidebar-menu-sub";
+export type { SidebarStyles, SidebarState } from "./types";