Panel

import { Panel } from "@lualtek/react-components";
 
export default () => {
  return (
    <Panel bordered vibrancy="strong" vibrancyColor="mid">
      ...
    </Panel>
  );
};

export type PanelProps = {
  /**
   * Set the background color of the panel between dimmed colors or custom string.
   * If `vibrant` is enabled, this will be ignored and vibrantColor will be used instead.
   */
  backgroundColor?: string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
  /**
   * Set the background color of the panel between dimmed colors or custom string when hovered.
   * If `vibrant` is enabled, this will be ignored and vibrantColor will be used instead.
   */
  backgroundColorHover?: string | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
  /**
   * Enable or disable the vibrant effect. Add translucent and blurred background.
   *
   * @defaultValue false
   */
  vibrant?: boolean;
  /**
   * Set the vibrancy level of the panel.
   *
   * @defayltValue "strong"
   */
  vibrancyLevel?: VibrancyBlur;
  /**
   * Change the background color of the card.
   */
  vibrancyColor?: VibrancyColor;
  /**
   * Change the saturation of the elements behind the vibrancy effect.
   *
   * @defaultValue "standard"
   */
  vibrancySaturation?: VibrancySaturation;
  /**
   * Show a border around the panel.
   */
  bordered?: boolean;
  /**
 * Define the edge radius of the card.
 */
  radius?: TokensTypes['radius'] | [RadiusType?, RadiusType?, RadiusType?, RadiusType?];
  /**
   * Enable border on a specific side.
   * @defaultValue 'all'
   */
  borderSide?: 'all' | 'top' | 'right' | 'bottom' | 'left';
  /**
   * Set the horizontal padding (left/right)
   */
  hPadding?: TokensTypes['space'];
  /**
   * Set the vertical padding (top/bottom)
   */
  vPadding?: TokensTypes['space'];
  /**
   * Disable the glow effect.
   */
  disableGlow?: boolean;
  /**
   * Set the spread of the glow effect.
   */
  glowSpread?: GlowProps['spread'];
  /**
   * Set the color of the glow effect.
   */
  glowColor?: GlowProps['glowColor'];
  /**
   * Set the rainbow colors of the glow effect.
   */
  rainbowColors?: GlowProps['rainbowColors'];
};