sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,91 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

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

package/src/components/MenuItem/MenuItem.tsx

@@ -1,211 +0,0 @@
-'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

@@ -1,40 +0,0 @@
-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

@@ -1,48 +0,0 @@
-/* ── 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

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