@korsolutions/ui 0.0.4 → 0.0.5

package/src/primitives/field/field-error.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useField } from "./context";
+
+export interface FieldErrorProps {
+  children: string;
+
+  render?: (props: FieldErrorProps) => React.ReactNode;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function FieldError(props: FieldErrorProps) {
+  const field = useField();
+  const Component = props.render ?? Text;
+  return <Component {...props} style={[field.styles?.error, props.style]} />;
+}

package/src/primitives/field/field-label.tsx

@@ -4,13 +4,17 @@ import { Text, TextProps } from "react-native";
 
 export interface FieldLabelProps {
   children: string;
-  style?: TextProps["style"];
+
+  htmlFor?: string;
+
   render?: (props: FieldLabelProps) => React.ReactNode;
+
+  style?: TextProps["style"];
 }
 
 export function FieldLabel(props: FieldLabelProps) {
   const field = useField();
-  const calculatedStyle = [field.styles?.label?.default, field.styles?.label?.[field.state], props.style];
 
-  return props.render ? props.render(props) : <Text style={calculatedStyle}>{props.children}</Text>;
+  const Component = props.render ?? Text;
+  return <Component {...props} htmlFor={props.htmlFor} style={[field.styles?.label, props.style]} />;
 }

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

@@ -1,69 +1,23 @@
-import React, { useState } from "react";
-import { Pressable, StyleProp, View, ViewStyle } from "react-native";
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { FieldContext } from "./context";
-import { FieldState, FieldStyles } from "./types";
+import { FieldStyles } from "./types";
 
-export interface FieldRootProps<TControlStyles = unknown> {
-  value: string | null;
-  onChange: (value: string) => void;
-
-  required?: boolean;
-  disabled?: boolean;
-  error?: string | null;
+export interface FieldPrimitiveRootProps {
   children?: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-
-  styles?: FieldStyles<TControlStyles>;
-}
-
-const calculateState = (props: FieldRootProps, focused: boolean, hovered: boolean): FieldState => {
-  if (props.disabled) {
-    return "disabled";
-  }
-  if (props.error) {
-    return "error";
-  }
-  if (focused) {
-    return "focused";
-  }
-  if (hovered) {
-    return "hovered";
-  }
-
-  return "default";
-};
-
-export function FieldRoot<TControlStyles = unknown>(props: FieldRootProps<TControlStyles>) {
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
 
-  const state = calculateState(props, focused, hovered);
+  render?: (props: FieldPrimitiveRootProps) => React.ReactNode;
 
-  const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
+  style?: StyleProp<ViewStyle>;
+  styles?: FieldStyles;
+}
 
+export function FieldRoot(props: FieldPrimitiveRootProps) {
+  const composedStyles = [props.styles?.root, props.style];
+  const Component = props.render ?? View;
   return (
-    <FieldContext.Provider
-      value={{
-        value: props.value,
-        onChange: props.onChange,
-
-        focused,
-        setFocused,
-
-        hovered,
-        setHovered,
-
-        required: props.required,
-        disabled: props.disabled,
-        error: props.error ?? null,
-
-        state: state,
-        styles: props.styles,
-      }}
-    >
-      <Pressable onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)} style={calculatedStyle}>
-        {props.children}
-      </Pressable>
+    <FieldContext.Provider value={{ styles: props.styles }}>
+      <Component {...props} style={composedStyles} />
     </FieldContext.Provider>
   );
 }

package/src/primitives/field/index.ts

@@ -1,14 +1,17 @@
 import { FieldRoot } from "./field-root";
 import { FieldLabel } from "./field-label";
-import { FieldControl } from "./field-control";
+import { FieldDescription } from "./field-description";
+import { FieldError } from "./field-error";
 
-export const Field = {
+export const FieldPrimitive = {
   Root: FieldRoot,
   Label: FieldLabel,
-  Control: FieldControl,
+  Description: FieldDescription,
+  Error: FieldError,
 };
 
-export type { FieldRootProps } from "./field-root";
+export type { FieldPrimitiveRootProps } from "./field-root";
 export type { FieldLabelProps } from "./field-label";
-export type { FieldControlProps } from "./field-control";
-export * from "./types";
+export type { FieldDescriptionProps } from "./field-description";
+export type { FieldErrorProps } from "./field-error";
+export type { FieldStyles } from "./types";

package/src/primitives/field/types.ts

@@ -1,10 +1,11 @@
+import { FieldPrimitiveRootProps } from "./field-root";
 import { FieldLabelProps } from "./field-label";
-import { FieldRootProps } from "./field-root";
+import { FieldDescriptionProps } from "./field-description";
+import { FieldErrorProps } from "./field-error";
 
-export type FieldState = "default" | "disabled" | "error" | "focused" | "hovered";
-
-export interface FieldStyles<TControlStyles = unknown> {
-  root?: Partial<Record<FieldState, FieldRootProps["style"]>>;
-  label?: Partial<Record<FieldState, FieldLabelProps["style"]>>;
-  control?: Partial<Record<FieldState, TControlStyles>>;
+export interface FieldStyles {
+  root?: FieldPrimitiveRootProps["style"];
+  label?: FieldLabelProps["style"];
+  description?: FieldDescriptionProps["style"];
+  error?: FieldErrorProps["style"];
 }

package/src/primitives/index.ts

@@ -1,5 +1,3 @@
-export * from "./provider";
-
 export * from "./field";
 export * from "./input";
 export * from "./button";

package/src/primitives/input/index.ts

@@ -1,2 +1,2 @@
 export * from "./input";
-export { InputStyles } from "./types";
+export type { InputStyles } from "./types";

package/src/primitives/input/input.tsx

@@ -1,20 +1,55 @@
-import { StyleProp, TextInput, TextInputProps, TextStyle } from "react-native";
-import { InputStyles } from "./types";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { TextInput, TextInputProps } from "react-native";
+import { InputState, InputStyles } from "./types";
+import { useState } from "react";
 
-export interface InputProps {
-  defaultValue?: TextInputProps["defaultValue"];
-  value: string | null;
-  onChange: (value: string) => void;
+export type InputPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  onChange?: TextInputProps["onChangeText"];
 
-  onFocus?: TextInputProps["onFocus"];
-  onBlur?: TextInputProps["onBlur"];
+  isDisabled?: boolean;
+};
+
+export interface InputPrimitiveProps extends InputPrimitiveBaseProps {
+  render?: (props: InputPrimitiveProps) => React.ReactNode;
 
-  style?: StyleProp<TextStyle>;
   styles?: InputStyles;
 }
 
-export function Input(props: InputProps) {
-  const composedStyles = calculateComposedStyles(props.styles, "default", "root", props.style);
-  return <TextInput {...props} value={props.value ?? ""} onChange={undefined} onChangeText={props.onChange} style={composedStyles} />;
+const calculateState = (props: InputPrimitiveProps, isFocused: boolean): InputState => {
+  if (props.isDisabled) {
+    return "disabled";
+  }
+  if (isFocused) {
+    return "focused";
+  }
+  return "default";
+};
+
+export function InputPrimitive(props: InputPrimitiveProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const state = calculateState(props, isFocused);
+
+  const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
+  const composedProps = {
+    ...props.styles?.default,
+    ...props.styles?.[state],
+    ...props,
+  };
+  const Component = props.render ?? TextInput;
+  return (
+    <Component
+      {...composedProps}
+      onChange={undefined}
+      onChangeText={props.onChange}
+      onFocus={(e) => {
+        setIsFocused(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        props.onBlur?.(e);
+      }}
+      readOnly={props.isDisabled || props.readOnly}
+      style={composedStyles}
+    />
+  );
 }

package/src/primitives/input/types.ts

@@ -1,7 +1,5 @@
-import { InputProps } from "./input";
+import { InputPrimitiveBaseProps } from "./input";
 
 export type InputState = "default" | "focused" | "disabled";
 
-export interface InputStyles {
-  root: Partial<Record<InputState, InputProps["style"]>>;
-}
+export type InputStyles = Partial<Record<InputState, InputPrimitiveBaseProps>>;

package/src/primitives/select/context.ts

@@ -3,9 +3,9 @@ import { SelectOption, SelectState, SelectStyles } from "./types";
 import { LayoutRectangle } from "react-native";
 
 export interface SelectContext {
-  value: string | null;
+  value?: string;
   onChange?: (value: string) => void;
-  placeholder: string | null;
+  placeholder?: string;
 
   isOpen: boolean;
   setIsOpen: Dispatch<React.SetStateAction<boolean>>;
@@ -14,7 +14,7 @@ export interface SelectContext {
   options: Array<SelectOption>;
   setOptions: Dispatch<React.SetStateAction<Array<SelectOption>>>;
 
-  disabled: boolean;
+  isDisabled: boolean;
 
   state: SelectState;
   styles: SelectStyles | null;

package/src/primitives/select/index.ts

@@ -6,7 +6,7 @@ import { SelectOverlay } from "./select-overlay";
 import { SelectContent } from "./select-content";
 import { SelectOption } from "./select-option";
 
-export const Select = {
+export const SelectPrimitive = {
   Root: SelectRoot,
   Trigger: SelectTrigger,
   Value: SelectValue,
@@ -16,7 +16,7 @@ export const Select = {
   Option: SelectOption,
 };
 
-export type { SelectRootProps } from "./select-root";
+export type { SelectRootProps, SelectRootBaseProps } from "./select-root";
 export type { SelectTriggerProps } from "./select-trigger";
 export type { SelectValueProps } from "./select-value";
 export type { SelectPortalProps } from "./select-portal";

package/src/primitives/select/select-content.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import { useSelect } from "./context";
 
 export interface SelectContentProps {

package/src/primitives/select/select-option.tsx

@@ -1,20 +1,41 @@
 import { StyleProp, Text, TextStyle } from "react-native";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import { useSelect } from "./context";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { SelectOptionState, SelectState } from "./types";
 
 export interface SelectOptionProps {
   children: string;
   value: string;
 
-  style?: StyleProp<TextStyle>;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
 
   render?: (props: SelectOptionProps) => React.ReactElement;
+
+  style?: StyleProp<TextStyle>;
 }
 
+const calculateState = (selectState: SelectState, hovered: boolean, selected: boolean): SelectOptionState => {
+  if (selectState === "disabled") {
+    return "disabled";
+  }
+  if (selected) {
+    return "selected";
+  }
+  if (hovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
 export function SelectOption(props: SelectOptionProps) {
+  const [isHovered, setIsHovered] = useState(false);
   const select = useSelect();
-  const composedStyles = calculateComposedStyles(select.styles, select.state, "option", props.style);
+  const isSelected = select.value === props.value;
+
+  const optionState = calculateState(select.state, isHovered, isSelected);
+  const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
 
   useEffect(() => {
     select.setOptions((prev) => {
@@ -33,6 +54,8 @@ export function SelectOption(props: SelectOptionProps) {
         select.onChange?.(props.value);
         select.setIsOpen(false);
       }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       style={composedStyles}
     >
       {props.children}

package/src/primitives/select/select-overlay.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSelect } from "./context";
 import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 export interface SelectOverlayProps {
   children?: React.ReactNode;

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

@@ -2,20 +2,22 @@ import React, { useState } from "react";
 import { LayoutRectangle, StyleProp, View, ViewStyle } from "react-native";
 import { SelectContext } from "./context";
 import { SelectOption, SelectState, SelectStyles } from "./types";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 interface SelectRootInjectedProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export interface SelectRootProps {
-  children?: React.ReactNode;
-
-  value: string | null;
-  onChange: (value: string) => void;
+export interface SelectRootBaseProps {
+  value?: string;
+  onChange?: (value: string) => void;
   placeholder?: string;
 
-  disabled?: boolean;
+  isDisabled?: boolean;
+}
+
+export interface SelectRootProps extends SelectRootBaseProps {
+  children?: React.ReactNode;
 
   render?: (props: SelectRootInjectedProps) => React.ReactElement;
 
@@ -24,7 +26,7 @@ export interface SelectRootProps {
 }
 
 const calculateState = (props: SelectRootProps): SelectState => {
-  if (props.disabled) {
+  if (props.isDisabled) {
     return "disabled";
   }
   return "default";
@@ -42,9 +44,9 @@ export function SelectRoot(props: SelectRootProps) {
   return (
     <SelectContext.Provider
       value={{
-        value: props.value ?? null,
+        value: props.value,
         onChange: props.onChange,
-        placeholder: props.placeholder ?? null,
+        placeholder: props.placeholder,
         isOpen,
         setIsOpen,
         triggerLayout,
@@ -52,7 +54,7 @@ export function SelectRoot(props: SelectRootProps) {
         options,
         setOptions,
         state,
-        disabled: props.disabled ?? false,
+        isDisabled: props.isDisabled ?? false,
         styles: props.styles ?? null,
       }}
     >

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Pressable, StyleProp, ViewStyle } from "react-native";
 import { useSelect } from "./context";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
-import { normalizeLayout } from "../../utils/normalize-layout";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { normalizeLayout } from "@/utils/normalize-layout";
 
 interface SelectTriggerInjectionProps {
   onPress?: () => void;
@@ -29,6 +29,7 @@ export function SelectTrigger(props: SelectTriggerProps) {
         const layout = normalizeLayout(e.nativeEvent.layout);
         select.setTriggerLayout(layout);
       }}
+      disabled={select.isDisabled}
       style={composedStyles}
     >
       {props.children}

package/src/primitives/select/select-value.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
 import { useSelect } from "./context";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 export interface SelectValueProps {
   style?: StyleProp<TextStyle>;
@@ -12,7 +13,9 @@ export function SelectValue(props: SelectValueProps) {
   const select = useSelect();
 
   const selectedOption = select.options.find((option) => option.value === select.value);
+  const selectedOptionLabel = selectedOption?.label;
 
+  const composedStyles = calculateComposedStyles(select.styles, select.state, selectedOptionLabel ? "value" : "placeholder", props.style);
   const Component = props.render ?? Text;
-  return <Component style={props.style}>{selectedOption?.label ?? select.placeholder}</Component>;
+  return <Component style={composedStyles}>{selectedOption?.label ?? select.placeholder}</Component>;
 }

package/src/primitives/select/types.ts

@@ -6,14 +6,16 @@ import { SelectContentProps } from "./select-content";
 import { SelectOptionProps } from "./select-option";
 
 export type SelectState = "default" | "disabled";
+export type SelectOptionState = SelectState | "hovered" | "selected";
 
 export interface SelectStyles {
   root?: Partial<Record<SelectState, SelectRootProps["style"]>>;
   trigger?: Partial<Record<SelectState, SelectTriggerProps["style"]>>;
   value?: Partial<Record<SelectState, SelectValueProps["style"]>>;
+  placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
   overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
   content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
-  option?: Partial<Record<SelectState, SelectOptionProps["style"]>>;
+  option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
 }
 
 export interface SelectOption {

package/src/themes/default/colors.ts

@@ -0,0 +1,45 @@
+import { Colors } from "../types";
+
+export const lightColors: Colors = {
+  background: "hsla(223.81, 100%, 100%, 1)",
+  foreground: "hsla(223.81, 0%, 3.94%, 1)",
+
+  primary: "hsla(223.81, 0%, 9.05%, 1)",
+  primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+
+  secondary: "hsla(223.81, 0%, 96.06%, 1)",
+  secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+
+  muted: "hsla(223.81, 0%, 96.06%, 1)",
+  mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
+
+  border: "hsla(223.81, 0%, 89.82%, 1)",
+  surface: "hsla(223.81, 100%, 100%, 1)",
+
+  danger: "hsla(0, 84.2%, 60.2%, 1)",
+  success: "hsla(173, 58%, 39%, 1)",
+  warning: "hsla(43, 74%, 66%, 1)",
+  info: "hsla(197, 37%, 24%, 1)",
+};
+
+export const darkColors: Colors = {
+  background: "hsla(223.81, 0%, 3.94%, 1)",
+  foreground: "hsla(223.81, 0%, 98.03%, 1)",
+
+  primary: "hsla(223.81, 0%, 89.82%, 1)",
+  primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+
+  secondary: "hsla(223.81, 0%, 14.94%, 1)",
+  secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+
+  muted: "hsla(223.81, 0%, 14.94%, 1)",
+  mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
+
+  border: "hsla(223.81, 0%, 15.51%, 1)",
+  surface: "hsla(223.81, 0%, 9.05%, 1)",
+
+  danger: "hsla(0, 62.8%, 30.6%, 1)",
+  success: "hsla(160, 60%, 45%, 1)",
+  warning: "hsla(30, 80%, 55%, 1)",
+  info: "hsla(220, 70%, 50%, 1)",
+};

package/src/themes/default/index.ts

@@ -0,0 +1,11 @@
+import { ThemeAssets } from "../types";
+import { darkColors, lightColors } from "./colors";
+
+export const defaultThemeAssets: ThemeAssets = {
+  colors: {
+    light: lightColors,
+    dark: darkColors,
+  },
+  radius: 10,
+  fontFamily: "System",
+};

package/src/themes/index.ts

@@ -0,0 +1,2 @@
+export * from "./provider";
+export * from "./types";

package/src/themes/provider.tsx

@@ -0,0 +1,56 @@
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
+import { Colors, ColorScheme, Radius, ThemeName } from "./types";
+import { themes } from "./themes";
+import { useColorScheme } from "react-native";
+
+interface ThemeContext {
+  colors: Colors;
+  radius: Radius;
+  fontFamily: string;
+  colorScheme: ColorScheme;
+  setColorScheme: (scheme: ColorScheme) => void;
+  setTheme: (themeName: ThemeName) => void;
+  themeName: ThemeName;
+}
+
+const ThemeContext = createContext<ThemeContext | null>(null);
+
+export const ThemeProvider = (props: PropsWithChildren) => {
+  const [themeName, setTheme] = useState<ThemeName>("default");
+
+  const systemColorScheme = useColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(systemColorScheme ?? "light");
+
+  const themesAssets = themes[themeName];
+  const colors = themesAssets.colors[colorScheme];
+
+  useEffect(() => {
+    if (systemColorScheme) {
+      setColorScheme(systemColorScheme);
+    }
+  }, [systemColorScheme]);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        themeName,
+        setTheme,
+        colorScheme,
+        setColorScheme,
+        colors,
+        radius: themesAssets.radius,
+        fontFamily: themesAssets.fontFamily,
+      }}
+    >
+      {props.children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

package/src/themes/themes.ts

@@ -0,0 +1,6 @@
+import { defaultThemeAssets } from "./default";
+import { ThemeAssets, ThemeName } from "./types";
+
+export const themes: Record<ThemeName, ThemeAssets> = {
+  default: defaultThemeAssets,
+};

package/src/themes/types.ts

@@ -0,0 +1,30 @@
+export type ThemeName = "default";
+export type ColorScheme = "light" | "dark";
+
+type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
+
+export interface Colors {
+  background: Color;
+  foreground: Color;
+  primary: Color;
+  primaryForeground: Color;
+  secondary: Color;
+  secondaryForeground: Color;
+  muted: Color;
+  mutedForeground: Color;
+  border: Color;
+  surface: Color;
+  success: Color;
+  warning: Color;
+  danger: Color;
+  info: Color;
+}
+
+export type Radius = number;
+export type FontFamily = string;
+
+export interface ThemeAssets {
+  colors: Record<ColorScheme, Colors>;
+  radius: Radius;
+  fontFamily: FontFamily;
+}

package/src/utils/hsla-utils.ts

@@ -0,0 +1,10 @@
+export const hslaSetAlpha = (hsla: string, alpha: number): string => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  const h = parseInt(parts[0], 10);
+  const s = parseInt(parts[1], 10);
+  const l = parseInt(parts[2], 10);
+  return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
+};