sdaia-ui 1.0.1

package/src/components/MenuButtonItem/MenuButtonItem.types.ts

@@ -0,0 +1,91 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual style / theme of the item. */
+export type MenuButtonItemVariant = 'transparent' | 'filled' | 'brand-background';
+
+/** @deprecated Use MenuButtonItemVariant */
+export type MenuButtonItemStyle = MenuButtonItemVariant;
+
+/** Size variant — lg renders a full row, sm renders icon-only. */
+export type MenuButtonItemSize = 'sm' | 'lg';
+
+/** Whether this is a top-level item or an indented sub-menu item. */
+export type MenuButtonItemItemType = 'menu' | 'sub-menu';
+
+export interface MenuButtonItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Layout direction — applied to the root element and inherited by all children. */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * Whether this is a top-level menu item or a nested sub-menu item.
+   * Sub-menu items render a left-side vertical divider and use subdued text.
+   * @default 'menu'
+   */
+  type?: MenuButtonItemItemType;
+
+  /**
+   * Visual style / theme of the item.
+   * - 'transparent' — no background (for use on plain sidebar backgrounds)
+   * - 'filled' — white/surface background
+   * - 'brand-background' — placed on a branded (green) sidebar background; text is white
+   * @default 'transparent'
+   */
+  variant?: MenuButtonItemVariant;
+
+  /**
+   * Whether the item is currently selected (active).
+   * Shows a colored left-side indicator bar and bolds the label.
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Size variant.
+   * - 'lg' — full-width row with optional icon, text, tag, and trailing icon
+   * - 'sm' — icon-only compact square
+   * @default 'lg'
+   */
+  size?: MenuButtonItemSize;
+
+  /**
+   * Primary label text shown in large size Menu items.
+   * @default 'Menu Item'
+   */
+  label?: string;
+
+  /**
+   * Label text shown in large size Sub Menu items.
+   * @default 'Sub menu'
+   */
+  subLabel?: string;
+
+  /** Show the leading icon. @default true */
+  showLeadingIcon?: boolean;
+
+  /** Show the trailing icon (large Menu items only). @default true */
+  showTrailingIcon?: boolean;
+
+  /** Custom override for the leading icon; replaces the default play icon. */
+  leadingIconNode?: ReactNode;
+
+  /** Custom override for the trailing icon; replaces the default play icon. */
+  trailingIconNode?: ReactNode;
+
+  /**
+   * Show the tag badge (large Menu items only).
+   * @default false
+   */
+  showTag?: boolean;
+
+  /**
+   * Text displayed inside the tag badge.
+   * @default 'Label'
+   */
+  tagLabel?: string;
+
+  /**
+   * Show the text label (large size only).
+   * Set to false to render an icon-row without text.
+   * @default true
+   */
+  showText?: boolean;
+}

package/src/components/MenuButtonItem/MenuButtonItem.variants.ts

@@ -0,0 +1,223 @@
+import type { MenuButtonItemVariant as MenuButtonItemStyle } from './MenuButtonItem.types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Outer root wrapper
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ROOT_BASE =
+  'group content-stretch flex items-center relative cursor-pointer select-none motion-feedback ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.5)]';
+
+/** Menu Large outer wrapper */
+export const ROOT_MENU_LG =
+  'gap-spacing-none px-spacing-sm py-spacing-xxs rounded-[8px] w-full';
+
+/** Menu Small outer wrapper (icon-only square) */
+export const ROOT_MENU_SM =
+  'gap-spacing-none h-[38px] min-h-[38px] p-spacing-none rounded-[8px]';
+
+/** Sub Menu Large outer wrapper — left-padding creates indent */
+export const ROOT_SUBMENU_LG =
+  'gap-spacing-md h-[36px] min-h-[36px] ps-spacing-xl pe-spacing-none py-spacing-none w-full';
+
+/** Sub Menu Small outer wrapper */
+export const ROOT_SUBMENU_SM =
+  'gap-spacing-md h-[36px] min-h-[36px] px-spacing-xl py-spacing-none';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Inner container (Menu Large)
+// Used by both Menu LG default and Sub Menu LG (content area)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const INNER_CONTAINER_BASE =
+  'content-stretch flex flex-1 gap-spacing-md items-center min-w-0 ' +
+  'px-spacing-md py-spacing-md relative rounded-[8px] overflow-hidden motion-feedback cursor-pointer';
+
+/**
+ * Background class(es) applied to the inner container when NOT selected.
+ * Includes hover state via group-hover.
+ *
+ * Token mapping:
+ *   background-body       → rgba(249,250,251,1)   [hover Transparent / Filled]
+ *   background-white      → #ffffff               [default Filled]
+ */
+export const INNER_BG_DEFAULT: Record<MenuButtonItemStyle, string> = {
+  transparent: [
+    // default: transparent
+    'group-hover:bg-[rgba(249,250,251,1)]',
+    'dark:group-hover:bg-[rgba(255,255,255,0.06)]',
+  ].join(' '),
+  filled: [
+    'bg-white dark:bg-[rgba(17,25,39,1)]',
+    'group-hover:bg-[rgba(249,250,251,1)]',
+    'dark:group-hover:bg-[rgba(255,255,255,0.06)]',
+  ].join(' '),
+  'brand-background': '',
+};
+
+/**
+ * Background class(es) applied to the inner container when selected (active).
+ *
+ * Token mapping:
+ *   background-neutral-100                  → rgba(243,244,246,1)   [Filled active]
+ *   button-background-transparent-hovered   → rgba(255,255,255,0.2) [Brand Background active]
+ */
+export const INNER_BG_SELECTED: Record<MenuButtonItemStyle, string> = {
+  transparent: '',
+  filled: 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.1)]',
+  'brand-background': 'bg-[rgba(255,255,255,0.2)]',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icon container (Menu Small)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const ICON_CONTAINER_BASE =
+  'content-stretch flex items-center p-spacing-md relative rounded-[8px] shrink-0 motion-feedback cursor-pointer';
+
+export const ICON_CONTAINER_BG_DEFAULT: Record<MenuButtonItemStyle, string> = {
+  transparent: [
+    'group-hover:bg-[rgba(249,250,251,1)]',
+    'dark:group-hover:bg-[rgba(255,255,255,0.06)]',
+  ].join(' '),
+  filled: [
+    'bg-white dark:bg-[rgba(17,25,39,1)]',
+    'group-hover:bg-[rgba(249,250,251,1)]',
+    'dark:group-hover:bg-[rgba(255,255,255,0.06)]',
+  ].join(' '),
+  'brand-background': '',
+};
+
+export const ICON_CONTAINER_BG_SELECTED: Record<MenuButtonItemStyle, string> = {
+  transparent: '',
+  filled: 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.1)]',
+  'brand-background': 'bg-[rgba(255,255,255,0.2)]',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Text colors
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Menu item label color (default + hover state).
+ * Token: Text/text-display → rgba(31,42,55,1)
+ */
+export const MENU_TEXT_DEFAULT: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  filled: 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'brand-background': 'text-white',
+};
+
+/**
+ * Menu item label color (active state — same color but font-[500] applied separately).
+ */
+export const MENU_TEXT_ACTIVE: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  filled: 'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'brand-background': 'text-white',
+};
+
+/**
+ * Sub-menu item label color (default + hover).
+ * Token: Text/text-primary-paragraph → rgba(56,66,80,1)
+ */
+export const SUBMENU_TEXT_DEFAULT: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  filled: 'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'brand-background': 'text-white',
+};
+
+/**
+ * Sub-menu item label color (active).
+ */
+export const SUBMENU_TEXT_ACTIVE: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+  filled: 'text-[rgba(56,66,80,1)] dark:text-[rgba(229,231,235,1)]',
+  'brand-background': 'text-white',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icon colors
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Leading/trailing icon color for default + hover states.
+ * Token: Icon/icon-default → #161616
+ */
+export const ICON_COLOR_DEFAULT: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(22,22,22,1)] dark:text-[rgba(209,213,219,1)]',
+  filled: 'text-[rgba(22,22,22,1)] dark:text-[rgba(209,213,219,1)]',
+  'brand-background': 'text-white',
+};
+
+/**
+ * Leading/trailing icon color for the active/selected state.
+ *
+ * Token mapping:
+ *   transparent → Icon/icon-primary  → #1b8354  (brand green)
+ *   filled      → Icon/icon-neutral  → #384250  (neutral dark)
+ *   brand-bg    → Icon/icon-oncolor  → #ffffff   (white on green bg)
+ */
+export const ICON_COLOR_ACTIVE: Record<MenuButtonItemStyle, string> = {
+  transparent: 'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]',
+  filled: 'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)]',
+  'brand-background': 'text-white',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Left-side active selector bar
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Absolute wrapper for the 3 px indicator */
+export const SELECTOR_WRAP_LG = 'absolute bottom-0 start-0 top-0 w-[3px]';
+export const SELECTOR_WRAP_SM = 'absolute h-[16px] start-0 top-[8px] w-[3px]';
+
+/** The actual bar element (inset keeps it from touching the container edges) */
+export const SELECTOR_BAR_LG =
+  'absolute start-0 rounded-[999px] w-[3px] transition-all duration-150 ' +
+  'bottom-[7px] top-[7px]';
+
+export const SELECTOR_BAR_SM =
+  'absolute start-0 rounded-[999px] w-[3px] transition-all duration-150 ' +
+  'bottom-0 top-0';
+
+/**
+ * Selector bar colors.
+ * Transparent style has no selector.
+ *
+ * Token mapping:
+ *   background-primary-400 → rgba(84,192,138,1)   [Filled hover]
+ *   background-primary     → rgba(27,131,84,1)     [Filled active]
+ *   button-bg-transparent-selected → rgba(255,255,255,0.3)  [Brand Bg hover]
+ *   white                                           [Brand Bg active]
+ */
+export const SELECTOR_COLOR: Record<
+  MenuButtonItemStyle,
+  { hover: string; active: string }
+> = {
+  transparent: { hover: '', active: '' },
+  filled: {
+    hover: 'bg-[rgba(84,192,138,1)] dark:bg-[rgba(84,192,138,1)]',
+    active: 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]',
+  },
+  'brand-background': {
+    hover: 'bg-[rgba(255,255,255,0.3)]',
+    active: 'bg-white',
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Sub Menu vertical divider line
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** The 1 px divider shown at the start edge of sub-menu items */
+export const SUBMENU_DIVIDER =
+  'bg-[rgba(210,214,219,1)] dark:bg-[rgba(255,255,255,0.15)] h-full shrink-0 w-px';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Icon slot wrapper
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Wraps the icon to ensure sizing and centering — token size-icon-lg = 20px desktop */
+export const ICON_SLOT =
+  'inline-flex items-center justify-center shrink-0 size-icon-lg cursor-pointer';

package/src/components/MenuButtonItem/index.ts

@@ -0,0 +1,8 @@
+export { MenuButtonItem } from './MenuButtonItem';
+export type {
+  MenuButtonItemProps,
+  MenuButtonItemVariant,
+  MenuButtonItemStyle,
+  MenuButtonItemSize,
+  MenuButtonItemItemType,
+} from './MenuButtonItem.types';

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { forwardRef, useCallback } from 'react';
+import { cn } from '../../lib/cn';
+import type { MenuItemProps } from './MenuItem.types';
+import {
+  INTERACTIVE_CLASSES,
+  SELECTED_CONTAINER,
+  SELECTED_TEXT,
+  DISABLED_CONTAINER,
+  DISABLED_TEXT,
+  DEFAULT_TEXT,
+  DEFAULT_TRAIL_TEXT,
+  INDICATOR_BASE,
+  INDICATOR_SELECTED,
+  INDICATOR_DISABLED,
+} from './MenuItem.variants';
+
+export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
+  function MenuItem(
+    {
+      label = 'Item Label',
+      leadingIcon,
+      showLeadingIcon = true,
+      selected = false,
+      disabled = false,
+      indicator = false,
+      trailElement = 'none',
+      trailText = '+99',
+      trailingIcon,
+      trailingButtonIcon,
+      onTrailingButtonClick,
+      tagLabel = 'Label',
+      switchChecked = false,
+      onSwitchChange,
+      onClick,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* Resolve text / icon color */
+    const textColor = disabled
+      ? DISABLED_TEXT
+      : selected
+        ? SELECTED_TEXT
+        : DEFAULT_TEXT;
+
+    const trailTextColor = disabled
+      ? DISABLED_TEXT
+      : selected
+        ? SELECTED_TEXT
+        : DEFAULT_TRAIL_TEXT;
+
+    /* Resolve indicator classes */
+    const indicatorClasses = disabled
+      ? INDICATOR_DISABLED
+      : selected
+        ? INDICATOR_SELECTED
+        : INDICATOR_BASE;
+
+    const handleSwitchToggle = useCallback(() => {
+      if (!disabled) {
+        onSwitchChange?.(!switchChecked);
+      }
+    }, [disabled, switchChecked, onSwitchChange]);
+
+    const handleTrailingButtonClick = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!disabled) {
+          onTrailingButtonClick?.();
+        }
+      },
+      [disabled, onTrailingButtonClick],
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="menu-item"
+        role="menuitem"
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        onClick={disabled ? undefined : onClick}
+        className={cn(
+          'flex items-center gap-spacing-md p-spacing-lg relative motion-feedback',
+          /* Rounded corners — full radius when no indicator, end-only with indicator */
+          indicator ? indicatorClasses : 'rounded-[4px]',
+          /* Selected background (prop-driven) */
+          selected && !disabled && SELECTED_CONTAINER,
+          /* Disabled */
+          disabled && DISABLED_CONTAINER,
+          /* Interactive hover / active / focus (CSS pseudo-classes) */
+          !disabled && 'cursor-pointer',
+          !disabled && INTERACTIVE_CLASSES,
+          className,
+        )}
+        {...rest}
+      >
+        {/* Leading icon */}
+        {showLeadingIcon && leadingIcon && (
+          <span
+            data-slot="leading-icon"
+            className={cn('shrink-0 size-icon-xl flex items-center justify-center', textColor)}
+          >
+            {leadingIcon}
+          </span>
+        )}
+
+        {/* Label text */}
+        <div className="flex flex-1 items-center overflow-hidden min-w-0">
+          <span
+            data-slot="label"
+            className={cn(
+              'flex-1 text-text-md font-[400] leading-[24px] truncate',
+              textColor,
+            )}
+          >
+            {label}
+          </span>
+        </div>
+
+        {/* Trail element */}
+        {trailElement === 'text' && (
+          <span
+            data-slot="trail-text"
+            className={cn(
+              'shrink-0 text-text-md font-[400] leading-[24px] whitespace-nowrap',
+              trailTextColor,
+            )}
+          >
+            {trailText}
+          </span>
+        )}
+
+        {trailElement === 'icon' && trailingIcon && (
+          <span
+            data-slot="trail-icon"
+            className={cn('shrink-0 size-icon-xl flex items-center justify-center', textColor)}
+          >
+            {trailingIcon}
+          </span>
+        )}
+
+        {trailElement === 'button' && (
+          <button
+            type="button"
+            data-slot="trail-button"
+            onClick={handleTrailingButtonClick}
+            disabled={disabled}
+            className={cn(
+              'shrink-0 flex items-center justify-center min-h-icon-lg min-w-icon-lg p-spacing-xs rounded-[8px] motion-feedback',
+              !disabled && 'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.1)]',
+              textColor,
+            )}
+          >
+            <span className="size-icon-xl flex items-center justify-center">
+              {trailingButtonIcon}
+            </span>
+          </button>
+        )}
+
+        {trailElement === 'tag' && (
+          <span
+            data-slot="trail-tag"
+            className={cn(
+              'shrink-0 inline-flex items-center justify-center rounded-[6px] border px-spacing-md py-[3px]',
+              'bg-white border-[rgba(210,214,219,1)] dark:bg-[rgba(17,25,39,1)] dark:border-[rgba(255,255,255,0.2)]',
+              disabled
+                ? 'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]'
+                : 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+            )}
+          >
+            <span className="text-text-xs font-[400] leading-[18px] whitespace-nowrap">
+              {tagLabel}
+            </span>
+          </span>
+        )}
+
+        {trailElement === 'switch' && (
+          <button
+            type="button"
+            data-slot="trail-switch"
+            role="switch"
+            aria-checked={switchChecked}
+            disabled={disabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleSwitchToggle();
+            }}
+            className={cn(
+              'shrink-0 relative inline-flex items-center w-[44px] h-[24px] rounded-full p-spacing-xxs motion-feedback',
+              switchChecked
+                ? 'bg-[rgba(27,131,84,1)] dark:bg-[rgba(27,131,84,1)]'
+                : 'bg-[rgba(243,244,246,1)] dark:bg-[rgba(255,255,255,0.15)]',
+              disabled && 'opacity-50',
+            )}
+          >
+            <span
+              className={cn(
+                'size-[20px] rounded-full bg-white shadow-[0px_1px_3px_0px_rgba(16,24,40,0.05),0px_1px_2px_0px_rgba(16,24,40,0.05)] transition-transform',
+                switchChecked ? 'translate-x-[20px] rtl:-translate-x-[20px]' : 'translate-x-0',
+              )}
+            />
+          </button>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/MenuItem/MenuItem.types.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type MenuItemTrailElement = 'none' | 'text' | 'icon' | 'button' | 'tag' | 'switch';
+
+export interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Layout direction — applied to the root element. */
+  dir?: 'ltr' | 'rtl';
+  /** Label text */
+  label?: string;
+  /** Optional leading icon */
+  leadingIcon?: ReactNode;
+  /** Whether to show the leading icon slot */
+  showLeadingIcon?: boolean;
+  /** Whether this item is currently selected */
+  selected?: boolean;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  /** Whether to show the left (start) indicator border */
+  indicator?: boolean;
+  /** Type of trailing element to display */
+  trailElement?: MenuItemTrailElement;
+  /** Trailing text (used when trailElement='text') */
+  trailText?: string;
+  /** Trailing icon (used when trailElement='icon') */
+  trailingIcon?: ReactNode;
+  /** Trailing button icon (used when trailElement='button') */
+  trailingButtonIcon?: ReactNode;
+  /** Trailing button click handler */
+  onTrailingButtonClick?: () => void;
+  /** Tag label (used when trailElement='tag') */
+  tagLabel?: string;
+  /** Switch checked state (used when trailElement='switch') */
+  switchChecked?: boolean;
+  /** Switch change handler (used when trailElement='switch') */
+  onSwitchChange?: (checked: boolean) => void;
+  /** Click handler */
+  onClick?: () => void;
+  /** Additional class names */
+  className?: string;
+}

package/src/components/MenuItem/MenuItem.variants.ts

@@ -0,0 +1,48 @@
+/* ── Interactive container styles ─────────────────────────────
+   Hover, pressed, and focus are handled via CSS pseudo-classes.
+   Only "selected" and "disabled" remain as prop-driven states.
+   ──────────────────────────────────────────────────────────── */
+
+/** Base interactive classes applied to every non-disabled menu item */
+export const INTERACTIVE_CLASSES = [
+  /* Hover */
+  'hover:bg-[rgba(229,231,235,1)] dark:hover:bg-[rgba(255,255,255,0.1)]',
+  /* Pressed / Active */
+  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.15)]',
+  /* Focus-visible (keyboard) */
+  'focus-visible:outline-none focus-visible:border focus-visible:border-[rgba(22,22,22,1)] dark:focus-visible:border-[rgba(229,231,235,1)]',
+].join(' ');
+
+/* ── Selected state (prop-driven) ────────────────────────────── */
+
+export const SELECTED_CONTAINER =
+  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(27,131,84,0.1)]';
+
+export const SELECTED_TEXT =
+  'text-[rgba(27,131,84,1)] dark:text-[rgba(84,192,138,1)] text-text-md';
+
+/* ── Disabled state (prop-driven) ────────────────────────────── */
+
+export const DISABLED_CONTAINER = 'pointer-events-none cursor-default';
+
+export const DISABLED_TEXT =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Default text / icon colors ──────────────────────────────── */
+
+export const DEFAULT_TEXT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] text-text-md';
+
+export const DEFAULT_TRAIL_TEXT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] text-text-md';
+
+/* ── Indicator (start border) ────────────────────────────────── */
+
+export const INDICATOR_BASE =
+  'border-s border-s-[rgba(210,214,219,1)] rounded-e-[4px] dark:border-s-[rgba(255,255,255,0.2)]';
+
+export const INDICATOR_SELECTED =
+  'border-s-2 border-s-[rgba(27,131,84,1)] rounded-e-[4px] dark:border-s-[rgba(84,192,138,1)]';
+
+export const INDICATOR_DISABLED =
+  'border-s border-s-[rgba(210,214,219,1)] rounded-e-[4px] dark:border-s-[rgba(75,85,99,1)]';

package/src/components/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps, MenuItemTrailElement } from './MenuItem.types';