@korsolutions/ui 0.0.49 → 0.0.51

package/src/components/card/index.ts

@@ -0,0 +1,20 @@
+import { CardBody } from "./card-body";
+import { CardFooter } from "./card-footer";
+import { CardHeader } from "./card-header";
+import { CardRoot } from "./card-root";
+import { CardTitle } from "./card-title";
+
+export const Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  Title: CardTitle,
+  Body: CardBody,
+  Footer: CardFooter,
+};
+
+export type { CardBodyProps } from "./card-body";
+export type { CardFooterProps } from "./card-footer";
+export type { CardHeaderProps } from "./card-header";
+export type { CardRootProps } from "./card-root";
+export type { CardTitleProps } from "./card-title";
+export type { CardStyles } from "./types";

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

@@ -1,4 +1,4 @@
-import { type CardStyles } from "@/primitives";
+import { type CardStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useCardVariantDefault(): CardStyles {
@@ -10,13 +10,12 @@ export function useCardVariantDefault(): CardStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          paddingVertical: 24,
-          gap: 24,
         },
       },
       header: {
         default: {
           paddingHorizontal: 24,
+          paddingTop: 24,
         },
       },
       title: {
@@ -29,10 +28,18 @@ export function useCardVariantDefault(): CardStyles {
       },
       body: {
         default: {
+          padding: 24,
+          gap: 24,
+        },
+      },
+      footer: {
+        default: {
+          flexDirection: "row",
           paddingHorizontal: 24,
+          paddingBottom: 24,
           gap: 24,
         },
       },
-    })
+    }),
   );
 }

package/src/components/checkbox/components/checkbox-content.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxContentProps extends ViewProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CheckboxContent(props: CheckboxContentProps) {
+  const { children, style, ...viewProps } = props;
+  const { state, styles } = useCheckboxContext();
+
+  const calculatedStyle = [styles?.content?.default, styles?.content?.[state], style];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {children}
+    </View>
+  );
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxDescriptionProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxDescription(props: CheckboxDescriptionProps) {
+  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/components/checkbox/components/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 "../context";
+import type { CheckboxState } from "../types";
+
+export interface CheckboxIndicatorProps 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: CheckboxIndicatorProps) {
+  const { style, ...viewProps } = props;
+  const { value, state, styles } = useCheckboxContext();
+
+  const indicatorState = calculateState(state, value);
+
+  const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
+  const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
+
+  return (
+    <View {...viewProps} style={calculatedStyle}>
+      {value && <Text style={checkmarkStyle}>✓</Text>}
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
+import { useCheckboxContext } from "../context";
+
+export interface CheckboxTitleProps extends TextProps {
+  children: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function CheckboxTitle(props: CheckboxTitleProps) {
+  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/components/checkbox/context.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { CheckboxState, CheckboxStyles } from "./types";
+
+export interface CheckboxContextValue {
+  value: boolean;
+  isDisabled?: boolean;
+  state: CheckboxState;
+  styles?: CheckboxStyles;
+}
+
+export const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
+
+export const useCheckboxContext = () => {
+  const context = React.useContext(CheckboxContext);
+  if (!context) {
+    throw new Error("Checkbox compound components must be used within Checkbox.Root");
+  }
+  return context;
+};

package/src/components/checkbox/index.ts

@@ -1,2 +1,20 @@
-export { Checkbox } from "./checkbox";
-export { CheckboxVariants } from "./variants";
+import { CheckboxContent } from "./components/checkbox-content";
+import { CheckboxDescription } from "./components/checkbox-description";
+import { CheckboxIndicator } from "./components/checkbox-indicator";
+import { CheckboxRoot } from "./components/checkbox-root";
+import { CheckboxTitle } from "./components/checkbox-title";
+
+export const Checkbox = {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator,
+  Content: CheckboxContent,
+  Title: CheckboxTitle,
+  Description: CheckboxDescription,
+};
+
+export type { CheckboxContentProps } from "./components/checkbox-content";
+export type { CheckboxDescriptionProps } from "./components/checkbox-description";
+export type { CheckboxIndicatorProps } from "./components/checkbox-indicator";
+export type { CheckboxRootProps } from "./components/checkbox-root";
+export type { CheckboxTitleProps } from "./components/checkbox-title";
+export * from "./types";

package/src/components/checkbox/types.ts

@@ -0,0 +1,12 @@
+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>>>;
+  content?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
+  title?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
+  description?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
+}

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

@@ -1,4 +1,4 @@
-import { type CheckboxStyles } from "@/primitives";
+import { type CheckboxStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useCheckboxVariantDefault = (): CheckboxStyles => {
@@ -39,6 +39,11 @@ export const useCheckboxVariantDefault = (): CheckboxStyles => {
           lineHeight: 16,
         },
       },
+      content: {
+        default: {
+          flex: 1,
+        },
+      },
       title: {
         default: {
           color: colors.foreground,
@@ -61,6 +66,6 @@ export const useCheckboxVariantDefault = (): CheckboxStyles => {
           opacity: 0.7,
         },
       },
-    })
+    }),
   );
 };

package/src/components/checkbox/variants/outlined.tsx

@@ -1,4 +1,4 @@
-import { type CheckboxStyles } from "@/primitives";
+import { type CheckboxStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useCheckboxVariantOutlined = (): CheckboxStyles => {
@@ -42,7 +42,6 @@ export const useCheckboxVariantOutlined = (): CheckboxStyles => {
           backgroundColor: colors.primary,
           borderColor: colors.primary,
         },
-
         disabled: {
           opacity: 0.5,
         },
@@ -55,6 +54,11 @@ export const useCheckboxVariantOutlined = (): CheckboxStyles => {
           lineHeight: 16,
         },
       },
+      content: {
+        default: {
+          flex: 1,
+        },
+      },
       title: {
         default: {
           color: colors.foreground,
@@ -77,6 +81,6 @@ export const useCheckboxVariantOutlined = (): CheckboxStyles => {
           opacity: 0.7,
         },
       },
-    })
+    }),
   );
 };

package/src/components/empty/components/empty-description.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useEmpty } from "../context";
+
+export interface EmptyDescriptionProps {
+  children: string;
+  render?: (props: EmptyDescriptionProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyDescription(props: EmptyDescriptionProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.description, props.style];
+
+  return <Text {...props} style={composedStyles} />;
+}

package/src/components/empty/components/empty-media.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useEmpty } from "../context";
+
+export interface EmptyMediaProps {
+  children: React.ReactNode;
+  render?: (props: EmptyMediaProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function EmptyMedia(props: EmptyMediaProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.media, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyles} />;
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { EmptyContext } from "../context";
+import { EmptyVariants } from "../variants";
+
+export interface EmptyRootProps {
+  variant?: keyof typeof EmptyVariants;
+  children: React.ReactNode;
+  render?: (props: EmptyRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function EmptyRoot(props: EmptyRootProps) {
+  const variantStyles = EmptyVariants[props.variant || "default"]();
+
+  const composedStyles = [variantStyles.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <EmptyContext.Provider value={{ styles: variantStyles }}>
+      <Component {...props} style={composedStyles} />
+    </EmptyContext.Provider>
+  );
+}

package/src/components/empty/components/empty-title.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import { useEmpty } from "../context";
+
+export interface EmptyTitleProps {
+  children: string;
+  render?: (props: EmptyTitleProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyTitle(props: EmptyTitleProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.title, props.style];
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/components/empty/index.ts

@@ -0,0 +1,17 @@
+import { EmptyDescription } from "./components/empty-description";
+import { EmptyMedia } from "./components/empty-media";
+import { EmptyRoot } from "./components/empty-root";
+import { EmptyTitle } from "./components/empty-title";
+
+export const Empty = {
+  Root: EmptyRoot,
+  Media: EmptyMedia,
+  Title: EmptyTitle,
+  Description: EmptyDescription,
+};
+
+export type { EmptyDescriptionProps } from "./components/empty-description";
+export type { EmptyMediaProps } from "./components/empty-media";
+export type { EmptyRootProps } from "./components/empty-root";
+export type { EmptyTitleProps } from "./components/empty-title";
+export type { EmptyStyles } from "./types";

package/src/components/empty/types.ts

@@ -0,0 +1,11 @@
+import type { EmptyDescriptionProps } from "./components/empty-description";
+import type { EmptyMediaProps } from "./components/empty-media";
+import type { EmptyRootProps } from "./components/empty-root";
+import type { EmptyTitleProps } from "./components/empty-title";
+
+export type EmptyStyles = {
+  root?: EmptyRootProps["style"];
+  media?: EmptyMediaProps["style"];
+  title?: EmptyTitleProps["style"];
+  description?: EmptyDescriptionProps["style"];
+};

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

@@ -1,4 +1,4 @@
-import { type EmptyStyles } from "@/primitives";
+import { type EmptyStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useEmptyVariantDefault(): EmptyStyles {
@@ -30,6 +30,6 @@ export function useEmptyVariantDefault(): EmptyStyles {
         color: colors.mutedForeground,
         textAlign: "center",
       },
-    })
+    }),
   );
 }

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { type StyleProp, Text, type 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]} />;
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { type StyleProp, Text, type 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/components/field/components/field-label.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text, type TextProps } from "react-native";
+import { useField } from "../context";
+
+export interface FieldLabelProps {
+  children: string;
+
+  for?: string;
+
+  render?: (props: FieldLabelProps) => React.ReactNode;
+
+  style?: TextProps["style"];
+}
+
+export function FieldLabel(props: FieldLabelProps) {
+  const field = useField();
+
+  const Component = props.render ?? Text;
+  return <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />;
+}

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

@@ -0,0 +1,26 @@
+import React, { useId } from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { FieldContext } from "../context";
+import { FieldVariants } from "../variants";
+
+export interface FieldRootProps {
+  variant?: keyof typeof FieldVariants;
+  children?: React.ReactNode;
+
+  render?: (props: FieldRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function FieldRoot(props: FieldRootProps) {
+  const variantStyles = FieldVariants[props.variant || "default"]();
+  const id = useId();
+
+  const composedStyles = [variantStyles.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <FieldContext.Provider value={{ styles: variantStyles, id }}>
+      <Component {...props} style={composedStyles} />
+    </FieldContext.Provider>
+  );
+}

package/src/components/field/index.ts

@@ -0,0 +1,17 @@
+import { FieldDescription } from "./components/field-description";
+import { FieldError } from "./components/field-error";
+import { FieldLabel } from "./components/field-label";
+import { FieldRoot } from "./components/field-root";
+
+export const Field = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Error: FieldError,
+};
+
+export type { FieldDescriptionProps } from "./components/field-description";
+export type { FieldErrorProps } from "./components/field-error";
+export type { FieldLabelProps } from "./components/field-label";
+export type { FieldRootProps } from "./components/field-root";
+export type { FieldStyles } from "./types";

package/src/components/field/types.ts

@@ -0,0 +1,11 @@
+import type { FieldDescriptionProps } from "./components/field-description";
+import type { FieldErrorProps } from "./components/field-error";
+import type { FieldLabelProps } from "./components/field-label";
+import type { FieldRootProps } from "./components/field-root";
+
+export interface FieldStyles {
+  root?: FieldRootProps["style"];
+  label?: FieldLabelProps["style"];
+  description?: FieldDescriptionProps["style"];
+  error?: FieldErrorProps["style"];
+}

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

@@ -1,4 +1,4 @@
-import { type FieldStyles } from "@/primitives";
+import { type FieldStyles } from "@/components";
 import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useFieldVariantDefault = (): FieldStyles => {
@@ -24,6 +24,6 @@ export const useFieldVariantDefault = (): FieldStyles => {
         fontSize: fontSize * 0.875,
         color: colors.danger,
       },
-    })
+    }),
   );
 };

package/src/components/icon/icon.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithRequiredRender, SvgProps } from "@/types/props.types";
+import React from "react";
+import { IconVariants } from "./variants";
+
+export type IconProps = SvgProps & {
+  variant?: keyof typeof IconVariants;
+};
+
+export function Icon({ render: Component, ...props }: PropsWithRequiredRender<IconProps>) {
+  const variantProps = IconVariants[props.variant ?? "default"]();
+  const composedProps: SvgProps = {
+    ...variantProps,
+    ...props,
+    style: [variantProps.style, props.style],
+    absoluteStrokeWidth: props.absoluteStrokeWidth ?? true,
+  };
+
+  return <Component {...composedProps} />;
+}

package/src/components/icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from "./icon";
+export type { IconProps } from "./icon";

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

@@ -0,0 +1,12 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { type IconProps } from "../icon";
+
+export function useIconVariantDefault(): IconProps {
+  return useThemedStyles(
+    ({ colors, fontSize }): IconProps => ({
+      color: colors.foreground,
+      size: fontSize * 1.5,
+      strokeWidth: 2,
+    }),
+  );
+}

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

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