@korsolutions/ui 0.0.44 → 0.0.46

package/src/primitives/index.ts

@@ -1,18 +1,20 @@
-export * from "./field";
-export * from "./input";
-export * from "./button";
-export * from "./select";
+export * from "./alert";
+export * from "./alert-dialog";
 export * from "./autocomplete";
-export * from "./card";
-export * from "./empty";
 export * from "./avatar";
-export * from "./toast";
 export * from "./badge";
-export * from "./textarea";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
+export * from "./checkbox";
 export * from "./dropdown-menu";
+export * from "./empty";
+export * from "./field";
+export * from "./input";
 export * from "./popover";
 export * from "./portal";
-export * from "./calendar";
+export * from "./progress";
+export * from "./select";
 export * from "./tabs";
-export * from "./checkbox";
-export * from "./alert-dialog";
+export * from "./textarea";
+export * from "./toast";

package/src/primitives/progress/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { ProgressState, ProgressStyles } from "./types";
+
+export interface ProgressContext {
+  state: ProgressState;
+  styles?: ProgressStyles;
+  value: number;
+  max: number;
+}
+
+export const ProgressContext = createContext<ProgressContext | undefined>(undefined);
+
+export const useProgress = () => {
+  const context = useContext(ProgressContext);
+  if (!context) {
+    throw new Error("useProgress must be used within a ProgressRoot");
+  }
+  return context;
+};

package/src/primitives/progress/index.ts

@@ -0,0 +1,11 @@
+import { ProgressRoot } from "./progress-root";
+import { ProgressIndicator } from "./progress-indicator";
+
+export const ProgressPrimitive = {
+  Root: ProgressRoot,
+  Indicator: ProgressIndicator,
+};
+
+export type { ProgressRootProps } from "./progress-root";
+export type { ProgressIndicatorProps } from "./progress-indicator";
+export type { ProgressStyles } from "./types";

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

@@ -0,0 +1,21 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useProgress } from "./context";
+
+export interface ProgressIndicatorProps {
+  render?: (props: ProgressIndicatorProps & { percentage: number }) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ProgressIndicator(props: ProgressIndicatorProps) {
+  const progress = useProgress();
+
+  const percentage = Math.min(Math.max((progress.value / progress.max) * 100, 0), 100);
+
+  const composedStyle = calculateComposedStyles(progress.styles, progress.state, "indicator", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} percentage={percentage} style={[composedStyle, { width: `${percentage}%` }]} />;
+}

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

@@ -0,0 +1,36 @@
+import { calculateComposedStyles } from "@/utils/calculate-styles";
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { ProgressContext } from "./context";
+import type { ProgressStyles } from "./types";
+
+export interface ProgressRootProps {
+  children?: React.ReactNode;
+
+  render?: (props: ProgressRootProps) => React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+  styles?: ProgressStyles;
+
+  value?: number;
+  max?: number;
+}
+
+export function ProgressRoot(props: ProgressRootProps) {
+  const { value = 0, max = 100 } = props;
+  const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <ProgressContext.Provider
+      value={{
+        state: "default",
+        styles: props.styles,
+        value,
+        max,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </ProgressContext.Provider>
+  );
+}

package/src/primitives/progress/types.ts

@@ -0,0 +1,9 @@
+import type { ProgressIndicatorProps } from "./progress-indicator";
+import type { ProgressRootProps } from "./progress-root";
+
+export type ProgressState = "default";
+
+export interface ProgressStyles {
+  root?: Partial<Record<ProgressState, ProgressRootProps["style"]>>;
+  indicator?: Partial<Record<ProgressState, ProgressIndicatorProps["style"]>>;
+}

package/src/types/props.types.ts

@@ -0,0 +1,3 @@
+export type PropsWithRender<P> = P & {
+  render?: (props: P) => React.ReactNode;
+};