@korsolutions/ui 0.0.34 → 0.0.36

package/src/primitives/checkbox/checkbox-description.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
+import { useCheckboxContext } from "./checkbox-context";
+
+export interface CheckboxPrimitiveDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxDescription(props: CheckboxPrimitiveDescriptionProps) {
+  const { children, style, ...textProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.description?.default, styles?.description?.[state], style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/checkbox/checkbox-indicator.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useCheckboxContext } from "./checkbox-context";
+import type { CheckboxState } from "./types";
+
+export interface CheckboxPrimitiveIndicatorProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (rootState: CheckboxState, checked: boolean): CheckboxState => {
+  if (rootState === "disabled") {
+    return "disabled";
+  }
+  if (checked) {
+    return "checked";
+  }
+  return rootState;
+};
+
+export function CheckboxIndicator(props: CheckboxPrimitiveIndicatorProps) {
+  const { style, ...viewProps } = props;
+  const { checked, state, styles } = useCheckboxContext();
+
+  const indicatorState = calculateState(state, checked);
+
+  const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
+  const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {checked && <Text style={checkmarkStyle}>✓</Text>}
+    </View>
+  );
+}

package/src/primitives/checkbox/checkbox-root.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { CheckboxPrimitiveContext } from "./checkbox-context";
+import type { CheckboxState, CheckboxStyles } from "./types";
+
+export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
+  children: React.ReactNode;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  styles?: CheckboxStyles;
+}
+
+const calculateState = (checked: boolean, disabled: boolean | undefined, isHovered: boolean): CheckboxState => {
+  if (disabled) {
+    return "disabled";
+  }
+  if (isHovered) {
+    return "hovered";
+  }
+  if (checked) {
+    return "checked";
+  }
+  return "default";
+};
+
+export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
+  const { children, checked, onChange, disabled, style, styles, ...pressableProps } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(checked, disabled, isHovered);
+
+  const handlePress = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+
+  const calculatedStyle = [styles?.root?.default, styles?.root?.[state], style];
+
+  const contextValue = React.useMemo(
+    () => ({
+      checked,
+      disabled,
+      state,
+      styles,
+    }),
+    [checked, disabled, state, styles]
+  );
+
+  return (
+    <CheckboxPrimitiveContext.Provider value={contextValue}>
+      <Pressable
+        {...pressableProps}
+        disabled={disabled}
+        onPress={handlePress}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={calculatedStyle}
+      >
+        {children}
+      </Pressable>
+    </CheckboxPrimitiveContext.Provider>
+  );
+}

package/src/primitives/checkbox/checkbox-title.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
+import { useCheckboxContext } from "./checkbox-context";
+
+export interface CheckboxPrimitiveTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxTitle(props: CheckboxPrimitiveTitleProps) {
+  const { children, style, ...textProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.title?.default, styles?.title?.[state], style];
+
+  return (
+    <Text {...textProps} style={calculatedStyle}>
+      {children}
+    </Text>
+  );
+}

package/src/primitives/checkbox/index.ts

@@ -0,0 +1,17 @@
+import { CheckboxRoot } from "./checkbox-root";
+import { CheckboxIndicator } from "./checkbox-indicator";
+import { CheckboxTitle } from "./checkbox-title";
+import { CheckboxDescription } from "./checkbox-description";
+
+export const CheckboxPrimitive = {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator,
+  Title: CheckboxTitle,
+  Description: CheckboxDescription,
+};
+
+export type { CheckboxPrimitiveRootProps } from "./checkbox-root";
+export type { CheckboxPrimitiveIndicatorProps } from "./checkbox-indicator";
+export type { CheckboxPrimitiveTitleProps } from "./checkbox-title";
+export type { CheckboxPrimitiveDescriptionProps } from "./checkbox-description";
+export * from "./types";

package/src/primitives/checkbox/types.ts

@@ -0,0 +1,11 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export type CheckboxState = "default" | "checked" | "disabled" | "hovered";
+
+export interface CheckboxStyles {
+  root?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
+  indicator?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
+  checkmark?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
+  title?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
+  description?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
+}

package/src/primitives/index.ts

@@ -13,3 +13,4 @@ export * from "./popover";
 export * from "./portal";
 export * from "./calendar";
 export * from "./tabs";
+export * from "./checkbox";

package/src/primitives/tabs/index.ts

@@ -1,5 +1,5 @@
-import { TabsRoot } from "./tabs-root";
 import { TabsList } from "./tabs-list";
+import { TabsRoot } from "./tabs-root";
 import { TabsTrigger } from "./tabs-trigger";
 import { TabsTriggerText } from "./tabs-trigger-text";
 
@@ -10,8 +10,8 @@ export const TabsPrimitive = {
   TriggerText: TabsTriggerText,
 };
 
-export type { TabsPrimitiveRootProps } from "./tabs-root";
 export type { TabsPrimitiveListProps } from "./tabs-list";
+export type { TabsPrimitiveRootProps } from "./tabs-root";
 export type { TabsPrimitiveTriggerProps } from "./tabs-trigger";
 export type { TabsPrimitiveTriggerTextProps } from "./tabs-trigger-text";
 export * from "./types";

package/src/primitives/tabs/tabs-context.tsx

@@ -1,16 +1,16 @@
-import React from "react";
+import React, { useContext } from "react";
 import type { TabsStyles } from "./types";
 
 export interface TabsPrimitiveContextValue {
   value: string;
-  onValueChange: (value: string) => void;
+  onChange: (value: string) => void;
   styles?: TabsStyles;
 }
 
 export const TabsPrimitiveContext = React.createContext<TabsPrimitiveContextValue | null>(null);
 
 export const useTabsContext = () => {
-  const context = React.useContext(TabsPrimitiveContext);
+  const context = useContext(TabsPrimitiveContext);
   if (!context) {
     throw new Error("Tabs compound components must be used within TabsPrimitive.Root");
   }

package/src/primitives/tabs/tabs-list.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, type ViewProps, type StyleProp, type ViewStyle } from "react-native";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 import { useTabsContext } from "./tabs-context";
 
 export interface TabsPrimitiveListProps extends ViewProps {

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

@@ -1,26 +1,26 @@
-import React from "react";
-import { View, type ViewProps, type StyleProp, type ViewStyle } from "react-native";
+import React, { useMemo } from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 import { TabsPrimitiveContext } from "./tabs-context";
 import type { TabsStyles } from "./types";
 
 export interface TabsPrimitiveRootProps extends Omit<ViewProps, "children"> {
   children: React.ReactNode;
   value: string;
-  onValueChange: (value: string) => void;
+  onChange: (value: string) => void;
   style?: StyleProp<ViewStyle>;
   styles?: TabsStyles;
 }
 
 export function TabsRoot(props: TabsPrimitiveRootProps) {
-  const { children, value, onValueChange, styles, style, ...viewProps } = props;
+  const { children, value, onChange, styles, style, ...viewProps } = props;
 
-  const contextValue = React.useMemo(
+  const contextValue = useMemo(
     () => ({
       value,
-      onValueChange,
+      onChange,
       styles,
     }),
-    [value, onValueChange, styles]
+    [value, onChange, styles]
   );
 
   return (

package/src/primitives/tabs/tabs-trigger-text.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
 import { useTabsContext } from "./tabs-context";
 
 export interface TabsPrimitiveTriggerTextProps extends TextProps {
@@ -16,11 +16,7 @@ export function TabsTriggerText(props: TabsPrimitiveTriggerTextProps) {
   const isActive = value === triggerValue;
   const state = isDisabled ? "disabled" : isActive ? "active" : "default";
 
-  const calculatedStyle = [
-    styles?.triggerText?.default,
-    styles?.triggerText?.[state],
-    style,
-  ];
+  const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
 
   return (
     <Text {...textProps} style={calculatedStyle}>

package/src/primitives/tabs/tabs-trigger.tsx

@@ -10,10 +10,7 @@ export interface TabsPrimitiveTriggerProps extends PressableProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  isActive: boolean,
-  isDisabled: boolean | undefined
-): TabsState => {
+const calculateState = (isActive: boolean, isDisabled: boolean | undefined): TabsState => {
   if (isDisabled) {
     return "disabled";
   }
@@ -25,30 +22,21 @@ const calculateState = (
 
 export function TabsTrigger(props: TabsPrimitiveTriggerProps) {
   const { children, value: triggerValue, isDisabled, style, ...pressableProps } = props;
-  const { value, onValueChange, styles } = useTabsContext();
+  const { value, onChange, styles } = useTabsContext();
 
   const isActive = value === triggerValue;
   const state = calculateState(isActive, isDisabled);
 
   const handlePress = () => {
     if (!isDisabled) {
-      onValueChange(triggerValue);
+      onChange(triggerValue);
     }
   };
 
-  const calculatedStyle = [
-    styles?.trigger?.default,
-    styles?.trigger?.[state],
-    style,
-  ];
+  const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
 
   return (
-    <Pressable
-      {...pressableProps}
-      disabled={isDisabled}
-      onPress={handlePress}
-      style={calculatedStyle}
-    >
+    <Pressable {...pressableProps} disabled={isDisabled} onPress={handlePress} style={calculatedStyle}>
       {children}
     </Pressable>
   );