@korsolutions/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,52 @@
+import { ButtonStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useButtonVariantDefault = (): ButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily }): ButtonStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          backgroundColor: colors.primary,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          borderRadius: radius,
+          gap: 8,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        loading: {
+          opacity: 0.8,
+        },
+      },
+      label: {
+        default: {
+          color: colors.primaryForeground,
+          fontSize: 16,
+          fontWeight: "bold",
+          fontFamily,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+      spinner: {
+        default: {
+          color: colors.primaryForeground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+    })
+  );
+};

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

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

package/src/components/card/card.tsx

@@ -0,0 +1,26 @@
+import { CardPrimitive } from "@/primitives";
+import React from "react";
+import { CardVariants } from "./variants";
+
+interface CardProps {
+  title?: string;
+  children: React.ReactNode;
+
+  variant?: keyof typeof CardVariants;
+}
+
+export function Card(props: CardProps) {
+  const useVariantStyles = CardVariants[props.variant || "default"];
+  const styles = useVariantStyles();
+
+  return (
+    <CardPrimitive.Root styles={styles}>
+      {!!props.title && (
+        <CardPrimitive.Header>
+          <CardPrimitive.Title>{props.title}</CardPrimitive.Title>
+        </CardPrimitive.Header>
+      )}
+      <CardPrimitive.Body>{props.children}</CardPrimitive.Body>
+    </CardPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { CardStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useCardVariantDefault(): CardStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily }): CardStyles => ({
+      root: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          paddingVertical: 24,
+          gap: 24,
+        },
+      },
+      header: {
+        default: {
+          paddingHorizontal: 24,
+        },
+      },
+      title: {
+        default: {
+          fontFamily,
+          fontSize: 18,
+          fontWeight: "600",
+          color: colors.foreground,
+        },
+      },
+      body: {
+        default: {
+          paddingHorizontal: 24,
+          gap: 24,
+        },
+      },
+    })
+  );
+}

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

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

package/src/components/field/field.tsx

@@ -0,0 +1,27 @@
+import { FieldPrimitive } from "@/primitives";
+import React from "react";
+import { FieldVariants } from "./variants";
+
+export interface FieldProps {
+  children: React.ReactNode;
+  id?: string;
+  label?: string;
+  description?: string;
+  error?: string;
+
+  variant?: keyof typeof FieldVariants;
+}
+
+export function Field(props: FieldProps) {
+  const useVariantStyles = FieldVariants[props.variant || "default"];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <FieldPrimitive.Root styles={variantStyles}>
+      {props.label && <FieldPrimitive.Label htmlFor={props.id}>{props.label}</FieldPrimitive.Label>}
+      {props.description && <FieldPrimitive.Description>{props.description}</FieldPrimitive.Description>}
+      {props.children}
+      {props.error && <FieldPrimitive.Error>{props.error}</FieldPrimitive.Error>}
+    </FieldPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { FieldStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export const useFieldVariantDefault = (): FieldStyles => {
+  return useThemedStyles(
+    ({ colors, fontFamily }): FieldStyles => ({
+      root: {
+        flexDirection: "column",
+        gap: 8,
+      },
+      label: {
+        fontFamily,
+        fontSize: 14,
+        fontWeight: "600",
+        color: colors.foreground,
+      },
+      description: {
+        fontFamily,
+        fontSize: 14,
+        color: colors.mutedForeground,
+      },
+      error: {
+        fontFamily,
+        fontSize: 14,
+        color: colors.danger,
+      },
+    })
+  );
+};

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

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

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./button/button";
+export * from "./card/card";
+export * from "./input/input";
+export * from "./field/field";
+export * from "./select/select";

package/src/components/input/input.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { InputVariants } from "./variants";
+import { InputPrimitive, InputPrimitiveBaseProps } from "@/primitives";
+
+interface InputProps extends InputPrimitiveBaseProps {
+  variant?: keyof typeof InputVariants;
+}
+
+export function Input(props: InputProps) {
+  const useVariantStyles = props.variant ? InputVariants[props.variant] : InputVariants["default"];
+  const variantStyles = useVariantStyles();
+
+  return <InputPrimitive {...props} styles={variantStyles} />;
+}

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

@@ -0,0 +1,34 @@
+import { InputStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useInputVariantDefault(): InputStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily }): InputStyles => ({
+      default: {
+        placeholderTextColor: colors.mutedForeground,
+        style: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          backgroundColor: colors.surface,
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          outlineWidth: 0,
+          fontFamily,
+          height: 48,
+        },
+      },
+      focused: {
+        style: {
+          borderColor: colors.primary,
+        },
+      },
+      disabled: {
+        style: {
+          color: colors.mutedForeground,
+          backgroundColor: colors.muted,
+        },
+      },
+    })
+  );
+}

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

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

package/src/components/select/select.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { SelectPrimitive, SelectRootBaseProps } from "@/primitives";
+import { SelectVariants } from "./variants";
+
+export interface SelectOption<T> {
+  value: T;
+  label: string;
+}
+
+export interface SelectProps<T> extends SelectRootBaseProps {
+  options: SelectOption<T>[];
+  variant?: keyof typeof SelectVariants;
+}
+
+export function Select<T>(props: SelectProps<T>) {
+  const useVariantStyles = SelectVariants[props.variant ?? "default"];
+  const variantStyles = useVariantStyles();
+  return (
+    <SelectPrimitive.Root {...props} styles={variantStyles}>
+      <SelectPrimitive.Trigger>
+        <SelectPrimitive.Value />
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Overlay />
+        <SelectPrimitive.Content>
+          {props.options.map((option) => (
+            <SelectPrimitive.Option key={String(option.value)} value={String(option.value)}>
+              {option.label}
+            </SelectPrimitive.Option>
+          ))}
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { SelectStyles } from "@/primitives";
+import { useThemedStyles } from "@/utils/use-themed-styles";
+
+export function useSelectVariantDefault(): SelectStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily }): SelectStyles => ({
+      root: {
+        default: {},
+        disabled: {},
+      },
+      trigger: {
+        default: {
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+          justifyContent: "center",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          height: 48,
+        },
+        disabled: {
+          backgroundColor: colors.muted,
+        },
+      },
+      value: {
+        default: {
+          fontFamily,
+          fontSize: 16,
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      placeholder: {
+        default: {
+          fontFamily,
+          fontSize: 16,
+          color: colors.mutedForeground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      overlay: {
+        default: {},
+        disabled: {},
+      },
+      content: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          gap: 4,
+        },
+        disabled: {},
+      },
+      option: {
+        default: {
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          fontFamily,
+          fontSize: 16,
+          color: colors.foreground,
+          borderRadius: radius / 2,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        selected: {
+          backgroundColor: colors.muted,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+    })
+  );
+}

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

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

package/src/index.tsx

@@ -0,0 +1,13 @@
+import { ThemeProvider } from "@/themes";
+import { PortalHost } from "./primitives/portal";
+
+export const UniversalUIProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ThemeProvider>
+      {children}
+      <PortalHost />
+    </ThemeProvider>
+  );
+};
+
+export { useTheme } from "./themes";

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

@@ -1,19 +1,19 @@
 import { createContext, useContext } from "react";
 import { ButtonState, ButtonStyles } from "./types";
 
-export interface ButtonContext {
+export interface ButtonPrimitiveContext {
   disabled?: boolean;
 
   state: ButtonState;
   styles?: ButtonStyles;
 }
 
-export const ButtonContext = createContext<ButtonContext | undefined>(undefined);
+export const ButtonPrimitiveContext = createContext<ButtonPrimitiveContext | undefined>(undefined);
 
-export const useButton = () => {
-  const context = useContext(ButtonContext);
+export const useButtonPrimitive = () => {
+  const context = useContext(ButtonPrimitiveContext);
   if (!context) {
-    throw new Error("useButton must be used within a ButtonProvider");
+    throw new Error("useButtonPrimitive must be used within a ButtonPrimitiveProvider");
   }
   return context;
 };

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
-import { useButton } from "./button-context";
+import { useButtonPrimitive } from "./button-context";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 
-export interface ButtonLabelProps {
+export interface ButtonPrimitiveLabelProps {
   children?: string;
 
   render?: (props: this) => React.ReactElement;
@@ -10,9 +11,10 @@ export interface ButtonLabelProps {
   style?: StyleProp<TextStyle>;
 }
 
-export function ButtonLabel(props: ButtonLabelProps) {
-  const button = useButton();
-  const calculatedStyle = [button.styles?.label?.default, button.styles?.label?.[button.state], props.style];
+export function ButtonLabel(props: ButtonPrimitiveLabelProps) {
+  const button = useButtonPrimitive();
+
+  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
 
   const Component = props.render ?? Text;
   return <Component style={calculatedStyle}>{props.children}</Component>;

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

@@ -1,14 +1,15 @@
 import React from "react";
 import { Pressable, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
-import { ButtonContext } from "./button-context";
+import { ButtonPrimitiveContext } from "./button-context";
 
-export interface ButtonRootProps {
+export interface ButtonPrimitiveRootProps {
   children?: React.ReactNode;
 
   onPress?: () => void;
 
-  disabled?: boolean;
+  isDisabled?: boolean;
+  isLoading?: boolean;
 
   style?: StyleProp<ViewStyle>;
   styles?: ButtonStyles;
@@ -16,22 +17,25 @@ export interface ButtonRootProps {
   render?: (props: this) => React.ReactElement;
 }
 
-const calculateState = (props: ButtonRootProps): ButtonState => {
-  if (props.disabled) {
+const calculateState = (props: ButtonPrimitiveRootProps): ButtonState => {
+  if (props.isDisabled) {
     return "disabled";
   }
+  if (props.isLoading) {
+    return "loading";
+  }
   return "default";
 };
 
-export function ButtonRoot(props: ButtonRootProps) {
+export function ButtonRoot(props: ButtonPrimitiveRootProps) {
   const state = calculateState(props);
 
   const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
 
   const Container = props.render ?? Pressable;
   return (
-    <ButtonContext.Provider value={{ disabled: props.disabled, state, styles: props.styles }}>
+    <ButtonPrimitiveContext.Provider value={{ disabled: props.isDisabled, state, styles: props.styles }}>
       <Container {...props} style={calculatedStyle} />
-    </ButtonContext.Provider>
+    </ButtonPrimitiveContext.Provider>
   );
 }

package/src/primitives/button/button-spinner.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ActivityIndicator, StyleProp, ViewStyle } from "react-native";
+import { useButtonPrimitive } from "./button-context";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+
+interface ButtonSpinnerProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ButtonSpinner(props: ButtonSpinnerProps) {
+  const button = useButtonPrimitive();
+  const composedStyle = calculateComposedStyles(button.styles, button.state, "spinner", props.style);
+  return <ActivityIndicator style={composedStyle} />;
+}

package/src/primitives/button/index.ts

@@ -1,11 +1,13 @@
 import { ButtonRoot } from "./button-root";
 import { ButtonLabel } from "./button-label";
+import { ButtonSpinner } from "./button-spinner";
 
-export const Button = {
+export const ButtonPrimitive = {
   Root: ButtonRoot,
   Label: ButtonLabel,
+  Spinner: ButtonSpinner,
 };
 
-export type { ButtonRootProps } from "./button-root";
-export type { ButtonLabelProps } from "./button-label";
+export type { ButtonPrimitiveRootProps } from "./button-root";
+export type { ButtonPrimitiveLabelProps } from "./button-label";
 export * from "./types";

package/src/primitives/button/types.ts

@@ -1,9 +1,10 @@
-import { ButtonRootProps } from "./button-root";
-import { ButtonLabelProps } from "./button-label";
+import { ButtonPrimitiveRootProps } from "./button-root";
+import { ButtonPrimitiveLabelProps } from "./button-label";
 
-export type ButtonState = "default" | "disabled";
+export type ButtonState = "default" | "disabled" | "loading";
 
 export interface ButtonStyles {
-  root?: Partial<Record<ButtonState, ButtonRootProps["style"]>>;
-  label?: Partial<Record<ButtonState, ButtonLabelProps["style"]>>;
+  root?: Partial<Record<ButtonState, ButtonPrimitiveRootProps["style"]>>;
+  label?: Partial<Record<ButtonState, ButtonPrimitiveLabelProps["style"]>>;
+  spinner?: Partial<Record<ButtonState, ButtonPrimitiveLabelProps["style"]>>;
 }

package/src/primitives/card/card-body.tsx

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

package/src/primitives/card/card-footer.tsx

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

package/src/primitives/card/card-header.tsx

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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { CardStyles } from "./types";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 import { CardContext } from "./context";
 
 export interface CardRootProps {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
 import { useCard } from "./context";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { calculateComposedStyles } from "@/utils/calculate-styles";
 
 export interface CardTitleProps {
   children?: string;

package/src/primitives/card/index.ts

@@ -4,7 +4,7 @@ import { CardTitle } from "./card-title";
 import { CardBody } from "./card-body";
 import { CardFooter } from "./card-footer";
 
-export const Card = {
+export const CardPrimitive = {
   Root: CardRoot,
   Header: CardHeader,
   Title: CardTitle,

package/src/primitives/field/context.ts

@@ -1,30 +1,16 @@
 import { createContext, useContext } from "react";
-import { FieldState, FieldStyles } from "./types";
+import { FieldStyles } from "./types";
 
-export interface FieldContext<TControlStyles = unknown> {
-  value: string | null;
-  onChange: (value: string) => void;
-
-  focused: boolean;
-  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-
-  hovered: boolean;
-  setHovered: React.Dispatch<React.SetStateAction<boolean>>;
-
-  disabled?: boolean;
-  required?: boolean;
-  error?: string | null;
-
-  state: FieldState;
-  styles?: FieldStyles<TControlStyles>;
+export interface FieldContext {
+  styles?: FieldStyles;
 }
 
 export const FieldContext = createContext<FieldContext | undefined>(undefined);
 
-export const useField = <TControlStyles = unknown>() => {
+export const useField = () => {
   const context = useContext(FieldContext);
   if (!context) {
     throw new Error("useField must be used within a FieldProvider");
   }
-  return context as FieldContext<TControlStyles>;
+  return context;
 };

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

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