@korsolutions/ui 0.0.95 → 0.0.97

package/src/components/item/index.ts

@@ -0,0 +1,23 @@
+import { ItemActions } from "./item-actions";
+import { ItemContent } from "./item-content";
+import { ItemDescription } from "./item-description";
+import { ItemMedia } from "./item-media";
+import { ItemRoot } from "./item-root";
+import { ItemTitle } from "./item-title";
+
+export const Item = {
+  Root: ItemRoot,
+  Media: ItemMedia,
+  Content: ItemContent,
+  Title: ItemTitle,
+  Description: ItemDescription,
+  Actions: ItemActions,
+};
+
+export type { ItemRootProps } from "./item-root";
+export type { ItemMediaProps } from "./item-media";
+export type { ItemContentProps } from "./item-content";
+export type { ItemTitleProps } from "./item-title";
+export type { ItemDescriptionProps } from "./item-description";
+export type { ItemActionsProps } from "./item-actions";
+export type { ItemStyles } from "./types";

package/src/components/item/item-actions.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useItem } from "./context";
+
+export interface ItemActionsProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ItemActions(props: PropsWithRender<ItemActionsProps>) {
+  const item = useItem();
+
+  const composedStyle = calculateComposedStyles(item.styles, item.state, "actions", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useItem } from "./context";
+
+export interface ItemContentProps {
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ItemContent(props: PropsWithRender<ItemContentProps>) {
+  const item = useItem();
+
+  const composedStyle = calculateComposedStyles(item.styles, item.state, "content", props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import type { TextChildren } from "../../types/element.types";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useItem } from "./context";
+
+export interface ItemDescriptionProps {
+  children?: TextChildren;
+  numberOfLines?: number;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ItemDescription(props: PropsWithRender<ItemDescriptionProps>) {
+  const item = useItem();
+
+  const composedStyle = calculateComposedStyles(
+    item.styles,
+    item.state,
+    "description",
+    props.style,
+  );
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useItem } from "./context";
+
+export interface ItemMediaProps {
+  variant?: "default" | "icon";
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ItemMedia(props: PropsWithRender<ItemMediaProps>) {
+  const item = useItem();
+
+  const styleKey = props.variant === "icon" ? "mediaIcon" : "media";
+  const composedStyle = calculateComposedStyles(item.styles, item.state, styleKey, props.style);
+
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyle} />;
+}

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles, mergeStyles } from "../../utils/calculate-styles";
+import { ItemContext } from "./context";
+import { ItemVariants } from "./variants";
+
+export interface ItemRootProps {
+  variant?: keyof typeof ItemVariants;
+  size?: "default" | "sm" | "xs";
+  children?: React.ReactNode;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ItemRoot(props: PropsWithRender<ItemRootProps>) {
+  const size = props.size ?? "default";
+  const variantStyles = ItemVariants[props.variant || "default"](size);
+  const componentConfig = useComponentConfig("item");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
+  const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
+
+  const Component = props.render ?? View;
+  return (
+    <ItemContext.Provider
+      value={{
+        state: "default",
+        styles: mergedStyles,
+        size,
+      }}
+    >
+      <Component {...props} style={composedStyle} />
+    </ItemContext.Provider>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { type StyleProp, Text, type TextStyle } from "react-native";
+import type { TextChildren } from "../../types/element.types";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles } from "../../utils/calculate-styles";
+import { useItem } from "./context";
+
+export interface ItemTitleProps {
+  children?: TextChildren;
+  numberOfLines?: number;
+
+  style?: StyleProp<TextStyle>;
+}
+
+export function ItemTitle(props: PropsWithRender<ItemTitleProps>) {
+  const item = useItem();
+
+  const composedStyle = calculateComposedStyles(item.styles, item.state, "title", props.style);
+
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyle} />;
+}

package/src/components/item/types.ts

@@ -0,0 +1,18 @@
+import type { ItemRootProps } from "./item-root";
+import type { ItemMediaProps } from "./item-media";
+import type { ItemContentProps } from "./item-content";
+import type { ItemTitleProps } from "./item-title";
+import type { ItemDescriptionProps } from "./item-description";
+import type { ItemActionsProps } from "./item-actions";
+
+export type ItemState = "default";
+
+export interface ItemStyles {
+  root?: Partial<Record<ItemState, ItemRootProps["style"]>>;
+  media?: Partial<Record<ItemState, ItemMediaProps["style"]>>;
+  mediaIcon?: Partial<Record<ItemState, ItemMediaProps["style"]>>;
+  content?: Partial<Record<ItemState, ItemContentProps["style"]>>;
+  title?: Partial<Record<ItemState, ItemTitleProps["style"]>>;
+  description?: Partial<Record<ItemState, ItemDescriptionProps["style"]>>;
+  actions?: Partial<Record<ItemState, ItemActionsProps["style"]>>;
+}

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

@@ -0,0 +1,71 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ItemStyles } from "../types";
+
+const sizeConfig = {
+  default: { padding: 12, gap: 12, iconBox: 40, fontSize: 1, descFontSize: 0.875 },
+  sm: { padding: 8, gap: 10, iconBox: 32, fontSize: 0.875, descFontSize: 0.8125 },
+  xs: { padding: 6, gap: 8, iconBox: 28, fontSize: 0.8125, descFontSize: 0.75 },
+} as const;
+
+export function useItemVariantDefault(size: "default" | "sm" | "xs" = "default"): ItemStyles {
+  const s = sizeConfig[size];
+
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ItemStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          padding: s.padding,
+          gap: s.gap,
+        },
+      },
+      media: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      mediaIcon: {
+        default: {
+          width: s.iconBox,
+          height: s.iconBox,
+          borderRadius: radius,
+          backgroundColor: colors.muted,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      content: {
+        default: {
+          flex: 1,
+          gap: 2,
+        },
+      },
+      title: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.fontSize,
+          lineHeight: Math.round(fontSize * s.fontSize * 1.3),
+          fontWeight: "500",
+          color: colors.foreground,
+        },
+      },
+      description: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.descFontSize,
+          lineHeight: Math.round(fontSize * s.descFontSize * 1.4),
+          color: colors.mutedForeground,
+        },
+      },
+      actions: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+      },
+    }),
+  );
+}

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

@@ -0,0 +1,9 @@
+import { useItemVariantDefault } from "./default";
+import { useItemVariantMuted } from "./muted";
+import { useItemVariantOutline } from "./outline";
+
+export const ItemVariants = {
+  default: useItemVariantDefault,
+  outline: useItemVariantOutline,
+  muted: useItemVariantMuted,
+};

package/src/components/item/variants/muted.tsx

@@ -0,0 +1,73 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ItemStyles } from "../types";
+
+const sizeConfig = {
+  default: { padding: 12, gap: 12, iconBox: 40, fontSize: 1, descFontSize: 0.875 },
+  sm: { padding: 8, gap: 10, iconBox: 32, fontSize: 0.875, descFontSize: 0.8125 },
+  xs: { padding: 6, gap: 8, iconBox: 28, fontSize: 0.8125, descFontSize: 0.75 },
+} as const;
+
+export function useItemVariantMuted(size: "default" | "sm" | "xs" = "default"): ItemStyles {
+  const s = sizeConfig[size];
+
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ItemStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          padding: s.padding,
+          gap: s.gap,
+          borderRadius: radius,
+          backgroundColor: colors.muted,
+        },
+      },
+      media: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      mediaIcon: {
+        default: {
+          width: s.iconBox,
+          height: s.iconBox,
+          borderRadius: radius,
+          backgroundColor: colors.background,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      content: {
+        default: {
+          flex: 1,
+          gap: 2,
+        },
+      },
+      title: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.fontSize,
+          lineHeight: Math.round(fontSize * s.fontSize * 1.3),
+          fontWeight: "500",
+          color: colors.foreground,
+        },
+      },
+      description: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.descFontSize,
+          lineHeight: Math.round(fontSize * s.descFontSize * 1.4),
+          color: colors.mutedForeground,
+        },
+      },
+      actions: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+      },
+    }),
+  );
+}

package/src/components/item/variants/outline.tsx

@@ -0,0 +1,74 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { ItemStyles } from "../types";
+
+const sizeConfig = {
+  default: { padding: 12, gap: 12, iconBox: 40, fontSize: 1, descFontSize: 0.875 },
+  sm: { padding: 8, gap: 10, iconBox: 32, fontSize: 0.875, descFontSize: 0.8125 },
+  xs: { padding: 6, gap: 8, iconBox: 28, fontSize: 0.8125, descFontSize: 0.75 },
+} as const;
+
+export function useItemVariantOutline(size: "default" | "sm" | "xs" = "default"): ItemStyles {
+  const s = sizeConfig[size];
+
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ItemStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          padding: s.padding,
+          gap: s.gap,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius,
+        },
+      },
+      media: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      mediaIcon: {
+        default: {
+          width: s.iconBox,
+          height: s.iconBox,
+          borderRadius: radius,
+          backgroundColor: colors.muted,
+          alignItems: "center",
+          justifyContent: "center",
+        },
+      },
+      content: {
+        default: {
+          flex: 1,
+          gap: 2,
+        },
+      },
+      title: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.fontSize,
+          lineHeight: Math.round(fontSize * s.fontSize * 1.3),
+          fontWeight: "500",
+          color: colors.foreground,
+        },
+      },
+      description: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * s.descFontSize,
+          lineHeight: Math.round(fontSize * s.descFontSize * 1.4),
+          color: colors.mutedForeground,
+        },
+      },
+      actions: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8,
+        },
+      },
+    }),
+  );
+}

package/src/index.tsx

@@ -2,6 +2,7 @@ import { ScrollBar } from "./components";
 import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { PortalHost } from "./components/portal";
 import { type PortalHostProps } from "./components/portal/portal.constants";
+import { FullScreenSpinnerContainer } from "./components/full-screen-spinner/manager";
 import { ToastContainer } from "./components/toast/manager";
 import { useInitializeNavigationContainerRef } from "./hooks/use-is-react-navigation-modal";
 import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
@@ -31,6 +32,7 @@ export const UIProvider = ({
       <ThemeProvider theme={theme} components={components}>
         <ScrollBar />
         <ToastContainer />
+        <FullScreenSpinnerContainer />
         {children}
         <PortalHost container={portalContainer} />
         <AsyncAlertDialogManager />

package/src/themes/types.ts

@@ -49,10 +49,12 @@ import type { WeekCalendarStyles } from "../components/calendar/week-calendar/ty
 import type { CardStyles } from "../components/card/types";
 import type { CheckboxStyles } from "../components/checkbox/types";
 import type { ComboboxStyles } from "../components/combobox/types";
+import type { DescriptionListStyles } from "../components/description-list/types";
 import type { EmptyStyles } from "../components/empty/types";
 import type { FieldStyles } from "../components/field/types";
 import type { IconButtonStyles } from "../components/icon-button/types";
 import type { InputStyles } from "../components/input/types";
+import type { ItemStyles } from "../components/item/types";
 import type { LinkStyles } from "../components/link";
 import type { MenuStyles } from "../components/menu/types";
 import type { PhoneInputStyles } from "../components/phone-input/types";
@@ -104,6 +106,9 @@ export interface ComponentsConfig {
   combobox?: {
     styles?: ComboboxStyles;
   };
+  descriptionList?: {
+    styles?: DescriptionListStyles;
+  };
   empty?: {
     styles?: EmptyStyles;
   };
@@ -116,6 +121,9 @@ export interface ComponentsConfig {
   input?: {
     styles?: InputStyles;
   };
+  item?: {
+    styles?: ItemStyles;
+  };
   link?: {
     styles?: LinkStyles;
   };

package/src/utils/hsla-utils.ts

@@ -20,3 +20,14 @@ export const hslaSetRelativeLightness = (hsla: string, delta: number): string =>
   if (newLightness < 0) newLightness = 0;
   return hslaSetLightness(hsla, newLightness);
 };
+
+export const setHSLAOpacity = (hsla: string, opacity: number): string => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts[0] === undefined) return hsla;
+  if (parts[1] === undefined) return hsla;
+  if (parts[2] === undefined) return hsla;
+  const h = parseInt(parts[0], 10);
+  const s = parseInt(parts[1], 10);
+  const l = parseInt(parts[2], 10);
+  return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
+};