@korsolutions/ui 0.0.86 → 0.0.87

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

@@ -0,0 +1,96 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SidebarStyles } from "../types";
+
+export function useSidebarVariantDefault(): SidebarStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize, spacing }): SidebarStyles => ({
+      root: {
+        height: "100%",
+        flexShrink: 0,
+        flexDirection: "column",
+        backgroundColor: colors.surface,
+        borderColor: colors.border,
+        overflow: "hidden",
+      },
+      header: {
+        paddingHorizontal: spacing * 2,
+        paddingTop: spacing * 2,
+        paddingBottom: spacing,
+      },
+      footer: {
+        paddingHorizontal: spacing * 2,
+        paddingTop: spacing,
+        paddingBottom: spacing * 2,
+      },
+      content: {
+        flex: 1,
+        paddingHorizontal: spacing * 2,
+      },
+      group: {
+        paddingVertical: spacing,
+        gap: spacing * 0.5,
+      },
+      groupLabel: {
+        fontFamily,
+        fontSize: fontSize * 0.75,
+        fontWeight: "500",
+        color: colors.mutedForeground,
+        paddingHorizontal: spacing,
+        paddingVertical: spacing * 0.5,
+        letterSpacing: 0.5,
+        textTransform: "uppercase",
+      },
+      menu: {
+        gap: 1,
+      },
+      menuItem: {
+        default: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: spacing,
+          paddingVertical: spacing,
+          paddingHorizontal: spacing * 1.5,
+          borderRadius: radius,
+          minHeight: 36,
+        },
+        active: {
+          backgroundColor: colors.muted,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+          opacity: 0.8,
+        },
+      },
+      menuItemText: {
+        default: {
+          fontFamily,
+          fontSize: fontSize * 0.875,
+          fontWeight: "500",
+          color: colors.foreground,
+          lineHeight: fontSize * 1.25,
+          flex: 1,
+        },
+        active: {
+          color: colors.primary,
+        },
+        hovered: {},
+      },
+      menuItemIcon: {
+        default: {
+          color: colors.foreground,
+          size: fontSize * 1.25,
+        },
+        active: {
+          color: colors.primary,
+        },
+      },
+      menuSub: {
+        paddingLeft: spacing * 3,
+        gap: 1,
+        borderLeftWidth: 1,
+        borderLeftColor: colors.border,
+        marginLeft: spacing * 2,
+      },
+    }),
+  );
+}

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

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

package/src/themes/types.ts

@@ -60,6 +60,7 @@ import type { ProgressStyles } from "../components/progress/types";
 import type { RadioGroupStyles } from "../components/radio-group/types";
 import type { SelectStyles } from "../components/select/types";
 import type { SeparatorStyles } from "../components/separator/types";
+import type { SidebarStyles } from "../components/sidebar/types";
 import type { SpinnerStyles } from "../components/spinner/types";
 import type { TableStyles } from "../components/table/types";
 import type { TabsStyles } from "../components/tabs/types";
@@ -136,6 +137,9 @@ export interface ComponentsConfig {
   separator?: {
     styles?: SeparatorStyles;
   };
+  sidebar?: {
+    styles?: SidebarStyles;
+  };
   spinner?: {
     styles?: SpinnerStyles;
   };