@korsolutions/ui 0.0.96 → 0.0.97

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/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;
   };