@korsolutions/ui 0.0.50 → 0.0.51

package/src/primitives/calendar/calendar-weeks.tsx

@@ -1,47 +0,0 @@
-import { getWeekDays, getWeeksInMonth } from "@/utils/date-utils";
-import React from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { CalendarDay } from "./calendar-day";
-import { useCalendarContext } from "./context";
-
-export interface CalendarWeekProps extends ViewProps {
-  index: number;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-function CalendarWeek(props: CalendarWeekProps) {
-  const { style, ...viewProps } = props;
-  const { currentMonth, styles } = useCalendarContext();
-
-  const days = getWeekDays(currentMonth.getMonth(), currentMonth.getFullYear(), props.index);
-
-  const composedStyle = [styles?.week, style];
-  return (
-    <View {...viewProps} style={composedStyle}>
-      {days.map((day, index) => {
-        return <CalendarDay key={index} date={day} />;
-      })}
-    </View>
-  );
-}
-
-export interface CalendarWeeksProps extends ViewProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-export function CalendarWeeks(props: CalendarWeeksProps) {
-  const { currentMonth, styles } = useCalendarContext();
-
-  const weeks = getWeeksInMonth(currentMonth);
-
-  const composedStyle = [styles?.weeks, props.style];
-
-  return (
-    <View style={composedStyle}>
-      {Array.from({ length: weeks }).map((_, index) => {
-        return <CalendarWeek key={index} index={index} />;
-      })}
-    </View>
-  );
-}

package/src/primitives/calendar/index.ts

@@ -1,26 +0,0 @@
-import { CalendarRoot } from "./calendar-root";
-import { CalendarHeader } from "./calendar-header";
-import { CalendarTitle } from "./calendar-title";
-import { CalendarNavButton } from "./calendar-nav-button";
-import { CalendarWeekLabels } from "./calendar-week-labels";
-import { CalendarWeeks } from "./calendar-weeks";
-import { CalendarDay } from "./calendar-day";
-
-export const CalendarPrimitive = {
-  Root: CalendarRoot,
-  Header: CalendarHeader,
-  Title: CalendarTitle,
-  NavButton: CalendarNavButton,
-  CalendarWeekLabels: CalendarWeekLabels,
-  Weeks: CalendarWeeks,
-  Day: CalendarDay,
-};
-
-export type { CalendarRootProps } from "./calendar-root";
-export type { CalendarHeaderProps } from "./calendar-header";
-export type { CalendarTitleProps } from "./calendar-title";
-export type { CalendarNavButtonProps } from "./calendar-nav-button";
-export type { CalendarWeekLabelsProps } from "./calendar-week-labels";
-export type { CalendarWeeksProps } from "./calendar-weeks";
-export type { CalendarDayProps } from "./calendar-day";
-export type { CalendarStyles, CalendarDayState } from "./types";

package/src/primitives/calendar/types.ts

@@ -1,39 +0,0 @@
-import type { TextStyle, ViewStyle } from "react-native";
-import type { CalendarDayProps } from "./calendar-day";
-import type { CalendarHeaderProps } from "./calendar-header";
-import type { CalendarRootProps } from "./calendar-root";
-import type { CalendarTitleProps } from "./calendar-title";
-import type { CalendarWeekLabelProps, CalendarWeekLabelsProps } from "./calendar-week-labels";
-import type { CalendarWeekProps, CalendarWeeksProps } from "./calendar-weeks";
-
-export type CalendarDayState = "default" | "selected" | "today" | "disabled" | "deprioritized" | "hovered";
-export type CalendarNavButtonState = "default" | "disabled" | "hovered";
-
-export interface CalendarStyles {
-  root?: CalendarRootProps["style"];
-  header?: CalendarHeaderProps["style"];
-  headerTitle?: CalendarTitleProps["style"];
-  navButton?: Partial<Record<CalendarNavButtonState, ViewStyle>>;
-  navButtonText?: Partial<Record<CalendarNavButtonState, TextStyle>>;
-  weekLabels: CalendarWeekLabelsProps["style"];
-  weekLabel?: CalendarWeekLabelProps["style"];
-  weeks?: CalendarWeekProps["style"];
-  week?: CalendarWeeksProps["style"];
-  dayButton?: Partial<Record<CalendarDayState, CalendarDayProps["style"]>>;
-  dayText?: Partial<Record<CalendarDayState, CalendarDayProps["textStyle"]>>;
-}
-
-export type Months = [
-  january: number,
-  february: number,
-  march: number,
-  april: number,
-  may: number,
-  june: number,
-  july: number,
-  august: number,
-  september: number,
-  october: number,
-  november: number,
-  december: number
-];

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

@@ -1,45 +0,0 @@
-import { type CardStyles } from "@/primitives";
-import { useThemedStyles } from "@/utils/use-themed-styles";
-
-export function useCardVariantDefault(): CardStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): CardStyles => ({
-      root: {
-        default: {
-          borderWidth: 1,
-          borderColor: colors.border,
-          borderRadius: radius,
-          backgroundColor: colors.surface,
-        },
-      },
-      header: {
-        default: {
-          paddingHorizontal: 24,
-          paddingTop: 24,
-        },
-      },
-      title: {
-        default: {
-          fontFamily,
-          fontSize: fontSize * 1.25,
-          fontWeight: "600",
-          color: colors.foreground,
-        },
-      },
-      body: {
-        default: {
-          padding: 24,
-          gap: 24,
-        },
-      },
-      footer: {
-        default: {
-          flexDirection: "row",
-          paddingHorizontal: 24,
-          paddingBottom: 24,
-          gap: 24,
-        },
-      },
-    }),
-  );
-}

package/src/primitives/checkbox/checkbox-context.tsx

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

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

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

@@ -1,34 +0,0 @@
-import React from "react";
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { useCheckboxContext } from "./checkbox-context";
-import type { CheckboxState } from "./types";
-
-export interface CheckboxPrimitiveIndicatorProps 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: CheckboxPrimitiveIndicatorProps) {
-  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/primitives/checkbox/checkbox-root.tsx

@@ -1,65 +0,0 @@
-import React, { useState } from "react";
-import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { CheckboxPrimitiveContext } from "./checkbox-context";
-import type { CheckboxState, CheckboxStyles } from "./types";
-
-export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
-  children: React.ReactNode;
-  value: boolean;
-  onChange: (value: boolean) => void;
-  isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  styles?: CheckboxStyles;
-}
-
-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: CheckboxPrimitiveRootProps) {
-  const { children, value, onChange, isDisabled, style, styles, ...pressableProps } = props;
-  const [isHovered, setIsHovered] = useState(false);
-
-  const state = calculateState(value, isDisabled, isHovered);
-  const handlePress = () => {
-    if (!isDisabled) {
-      onChange(!value);
-    }
-  };
-
-  const calculatedStyle = [styles?.root?.default, styles?.root?.[state], style];
-
-  const contextValue = React.useMemo(
-    () => ({
-      value,
-      isDisabled,
-      state,
-      styles,
-    }),
-    [value, isDisabled, state, styles]
-  );
-
-  return (
-    <CheckboxPrimitiveContext.Provider value={contextValue}>
-      <Pressable
-        {...pressableProps}
-        disabled={isDisabled}
-        onPress={handlePress}
-        onHoverIn={() => setIsHovered(true)}
-        onHoverOut={() => setIsHovered(false)}
-        style={calculatedStyle}
-      >
-        {children}
-      </Pressable>
-    </CheckboxPrimitiveContext.Provider>
-  );
-}

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

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

@@ -1,17 +0,0 @@
-import { CheckboxRoot } from "./checkbox-root";
-import { CheckboxIndicator } from "./checkbox-indicator";
-import { CheckboxTitle } from "./checkbox-title";
-import { CheckboxDescription } from "./checkbox-description";
-
-export const CheckboxPrimitive = {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-  Title: CheckboxTitle,
-  Description: CheckboxDescription,
-};
-
-export type { CheckboxPrimitiveRootProps } from "./checkbox-root";
-export type { CheckboxPrimitiveIndicatorProps } from "./checkbox-indicator";
-export type { CheckboxPrimitiveTitleProps } from "./checkbox-title";
-export type { CheckboxPrimitiveDescriptionProps } from "./checkbox-description";
-export * from "./types";

package/src/primitives/checkbox/types.ts

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

package/src/primitives/dropdown-menu/context.ts

@@ -1,25 +0,0 @@
-import type { LayoutPosition } from "@/hooks/use-relative-position";
-import { createContext, type Dispatch, useContext } from "react";
-import type { LayoutRectangle } from "react-native";
-import type { DropdownMenuStyles } from "./types";
-
-export interface DropdownMenuContext {
-  isOpen: boolean;
-  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
-  triggerPosition: LayoutPosition;
-  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
-  contentLayout: LayoutRectangle;
-  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
-
-  styles?: DropdownMenuStyles;
-}
-
-export const DropdownMenuContext = createContext<DropdownMenuContext | undefined>(undefined);
-
-export const useDropdownMenu = () => {
-  const context = useContext(DropdownMenuContext);
-  if (!context) {
-    throw new Error("useDropdownMenu must be used within a DropdownMenuRoot");
-  }
-  return context;
-};

package/src/primitives/dropdown-menu/dropdown-menu-button.tsx

@@ -1,47 +0,0 @@
-import React, { useState } from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-import type { DropdownMenuButtonState } from "./types";
-
-export interface DropdownMenuButtonProps {
-  children?: string;
-  onPress?: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-
-  render?: (props: DropdownMenuButtonProps) => React.ReactElement;
-
-  style?: StyleProp<TextStyle>;
-}
-
-const calculateState = (isHovered: boolean): DropdownMenuButtonState => {
-  if (isHovered) {
-    return "hovered";
-  }
-  return "default";
-};
-
-export function DropdownMenuButton(props: DropdownMenuButtonProps) {
-  const menu = useDropdownMenu();
-  const [isHovered, setIsHovered] = useState(false);
-  const state = calculateState(isHovered);
-  const composedStyle = [menu.styles?.button?.default, menu.styles?.button?.[state], props.style];
-
-  const handlePress = () => {
-    props.onPress?.();
-    menu.setIsOpen((prev) => !prev);
-  };
-
-  const Component = props.render ?? Text;
-  return (
-    <Component
-      {...props}
-      onPress={handlePress}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      style={composedStyle}
-    >
-      {props.children}
-    </Component>
-  );
-}

package/src/primitives/dropdown-menu/dropdown-menu-content.tsx

@@ -1,39 +0,0 @@
-import { useRelativePosition } from "@/hooks/use-relative-position";
-import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuContentProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuContentProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuContent(props: DropdownMenuContentProps) {
-  const menu = useDropdownMenu();
-
-  const positionStyle = useRelativePosition({
-    align: "start",
-    avoidCollisions: true,
-    triggerPosition: menu.triggerPosition,
-    contentLayout: menu.contentLayout,
-    alignOffset: 0,
-    side: "bottom",
-    sideOffset: 0,
-  });
-
-  const composedStyle = [positionStyle, menu.styles?.content, props.style];
-
-  const Component = props.render ?? View;
-  return (
-    <Component
-      {...props}
-      onLayout={(e) => {
-        menu.setContentLayout(e.nativeEvent.layout);
-      }}
-      style={composedStyle}
-    />
-  );
-}

package/src/primitives/dropdown-menu/dropdown-menu-divider.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuDividerProps {
-  render?: (props: DropdownMenuDividerProps) => React.ReactNode;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuDivider(props: DropdownMenuDividerProps) {
-  const menu = useDropdownMenu();
-
-  const composedStyle = StyleSheet.flatten([menu.styles?.divider, props.style]);
-
-  const Component = props.render ?? View;
-  return <Component {...props} style={composedStyle} />;
-}

package/src/primitives/dropdown-menu/dropdown-menu-overlay.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuOverlayProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuOverlayProps) => React.ReactElement;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-export function DropdownMenuOverlay(props: DropdownMenuOverlayProps) {
-  const menu = useDropdownMenu();
-
-  const composedStyle = [StyleSheet.absoluteFill, menu.styles?.overlay, props.style];
-
-  const Component = props.render ?? Pressable;
-  return (
-    <Component
-      onPress={() => {
-        menu.setIsOpen(false);
-      }}
-      style={composedStyle}
-    >
-      {props.children}
-    </Component>
-  );
-}

package/src/primitives/dropdown-menu/dropdown-menu-portal.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Portal } from "../portal";
-import { useDropdownMenu, DropdownMenuContext } from "./context";
-
-export interface DropdownMenuPortalProps {
-  children?: React.ReactNode;
-}
-
-export function DropdownMenuPortal(props: DropdownMenuPortalProps) {
-  const menu = useDropdownMenu();
-
-  if (!menu.isOpen) {
-    return null;
-  }
-
-  return (
-    <Portal name="dropdown-menu-portal">
-      <DropdownMenuContext.Provider value={menu}>{props.children}</DropdownMenuContext.Provider>
-    </Portal>
-  );
-}

package/src/primitives/dropdown-menu/dropdown-menu-root.tsx

@@ -1,35 +0,0 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks/use-relative-position";
-import React, { useState } from "react";
-import { type LayoutRectangle } from "react-native";
-import { DropdownMenuContext } from "./context";
-import type { DropdownMenuStyles } from "./types";
-
-export interface DropdownMenuRootProps {
-  children?: React.ReactNode;
-
-  render?: (props: DropdownMenuRootProps) => React.ReactNode;
-
-  styles?: DropdownMenuStyles;
-}
-
-export function DropdownMenuRoot(props: DropdownMenuRootProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
-  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
-
-  return (
-    <DropdownMenuContext.Provider
-      value={{
-        isOpen,
-        setIsOpen,
-        triggerPosition,
-        setTriggerPosition,
-        contentLayout,
-        setContentLayout,
-        styles: props.styles,
-      }}
-    >
-      {props.children}
-    </DropdownMenuContext.Provider>
-  );
-}

package/src/primitives/dropdown-menu/dropdown-menu-trigger.tsx

@@ -1,57 +0,0 @@
-import type { ViewRef } from "@/types/element.types";
-import { measureLayoutPosition } from "@/utils/normalize-layout";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
-import { type PressableProps } from "react-native";
-import { useDropdownMenu } from "./context";
-
-export interface DropdownMenuTriggerProps extends PressableProps {
-  children: React.ReactElement<PressableProps & React.RefAttributes<ViewRef>>;
-}
-
-export interface DropdownMenuTriggerRef {
-  open: () => void;
-  close: () => void;
-}
-
-export const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerRef, DropdownMenuTriggerProps>((props, ref) => {
-  const dropdownMenu = useDropdownMenu();
-  const triggerRef = useRef<ViewRef>(null);
-
-  const onTriggerPress = async () => {
-    if (!dropdownMenu.isOpen) {
-      measureLayoutPosition(triggerRef.current, (layout) => {
-        dropdownMenu.setTriggerPosition(layout);
-        dropdownMenu.setIsOpen(true);
-      });
-    } else {
-      dropdownMenu.setIsOpen(false);
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        dropdownMenu.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
-        });
-        dropdownMenu.setIsOpen(true);
-      });
-    },
-    close: () => dropdownMenu.setIsOpen(false),
-  }));
-
-  return React.cloneElement(props.children, {
-    ref: triggerRef,
-    onPress: onTriggerPress,
-    role: "button",
-    accessible: true,
-    accessibilityRole: "button",
-    accessibilityState: { expanded: dropdownMenu.isOpen },
-    ...props.children.props,
-  });
-});
-
-DropdownMenuTrigger.displayName = "DropdownMenuTrigger";

package/src/primitives/dropdown-menu/index.ts

@@ -1,26 +0,0 @@
-import { DropdownMenuRoot } from "./dropdown-menu-root";
-import { DropdownMenuTrigger } from "./dropdown-menu-trigger";
-import { DropdownMenuContent } from "./dropdown-menu-content";
-import { DropdownMenuButton } from "./dropdown-menu-button";
-import { DropdownMenuDivider } from "./dropdown-menu-divider";
-import { DropdownMenuPortal } from "./dropdown-menu-portal";
-import { DropdownMenuOverlay } from "./dropdown-menu-overlay";
-
-export const DropdownMenuPrimitive = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Overlay: DropdownMenuOverlay,
-  Content: DropdownMenuContent,
-  Button: DropdownMenuButton,
-  Divider: DropdownMenuDivider,
-};
-
-export type { DropdownMenuRootProps } from "./dropdown-menu-root";
-export type { DropdownMenuTriggerProps } from "./dropdown-menu-trigger";
-export type { DropdownMenuPortalProps } from "./dropdown-menu-portal";
-export type { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
-export type { DropdownMenuContentProps } from "./dropdown-menu-content";
-export type { DropdownMenuButtonProps } from "./dropdown-menu-button";
-export type { DropdownMenuDividerProps } from "./dropdown-menu-divider";
-export type { DropdownMenuStyles } from "./types";

package/src/primitives/dropdown-menu/types.ts

@@ -1,13 +0,0 @@
-import type { DropdownMenuButtonProps } from "./dropdown-menu-button";
-import type { DropdownMenuContentProps } from "./dropdown-menu-content";
-import type { DropdownMenuDividerProps } from "./dropdown-menu-divider";
-import type { DropdownMenuOverlayProps } from "./dropdown-menu-overlay";
-
-export type DropdownMenuButtonState = "default" | "hovered";
-
-export interface DropdownMenuStyles {
-  content?: DropdownMenuContentProps["style"];
-  button?: Partial<Record<DropdownMenuButtonState, DropdownMenuButtonProps["style"]>>;
-  divider?: DropdownMenuDividerProps["style"];
-  overlay?: DropdownMenuOverlayProps["style"];
-}