bubble-toolbar 0.1.0 → 1.0.0

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/BubbleToolbar.tsx","../src/context.ts","../src/BubbleGroup.tsx","../src/utils/children.ts","../src/utils/styles.ts","../src/components/BubbleIconButton.tsx","../src/components/BubbleArea.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport type { BubbleToolbarProps } from './types';\nimport { BubbleToolbarContext, BubbleToolbarContextValue } from './context';\nimport { BubbleGroup } from './BubbleGroup';\nimport { formatPx } from './utils/styles';\n\nexport interface BubbleToolbarComponent\n  extends React.ForwardRefExoticComponent<\n    BubbleToolbarProps & React.RefAttributes<HTMLDivElement>\n  > {\n  Group: typeof BubbleGroup;\n}\n\nexport const BubbleToolbar = forwardRef<HTMLDivElement, BubbleToolbarProps>(\n  (\n    {\n      groups,\n      children,\n      position = 'bottom',\n      theme = 'glass',\n      size = 'md',\n      blurred = true,\n      blurAmount = 16,\n      groupGap = 8,\n      itemGap = 8,\n      bordered = true,\n      shadow = true,\n      className = '',\n      style,\n      ariaLabel = 'Toolbar',\n      ...rest\n    },\n    ref\n  ) => {\n    const contextValue = useMemo<BubbleToolbarContextValue>(\n      () => ({\n        size,\n        theme,\n        blurred,\n        blurAmount,\n        itemGap,\n        bordered,\n        shadow,\n      }),\n      [size, theme, blurred, blurAmount, itemGap, bordered, shadow]\n    );\n\n    // Compute positioning styles\n    const getPositionStyles = (): React.CSSProperties => {\n      switch (position) {\n        case 'bottom':\n          return {\n            position: 'fixed',\n            bottom: '24px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            zIndex: 1000,\n          };\n        case 'top':\n          return {\n            position: 'fixed',\n            top: '24px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            zIndex: 1000,\n          };\n        case 'static':\n          return {\n            position: 'relative',\n          };\n        case 'custom':\n        default:\n          return {};\n      }\n    };\n\n    const containerStyles: React.CSSProperties = {\n      ...getPositionStyles(),\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: formatPx(groupGap),\n      maxWidth: 'calc(100vw - 32px)',\n      overflowX: 'auto',\n      overflowY: 'hidden',\n      padding: '4px',\n      boxSizing: 'border-box',\n      scrollbarWidth: 'none', // Firefox\n      msOverflowStyle: 'none', // IE/Edge\n      WebkitOverflowScrolling: 'touch',\n      pointerEvents: 'auto',\n      ...style,\n    };\n\n    const combinedClassName = [\n      'bubble-toolbar',\n      `bubble-toolbar--${position}`,\n      `bubble-toolbar--${theme}`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <BubbleToolbarContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"toolbar\"\n          aria-label={ariaLabel}\n          className={combinedClassName}\n          style={containerStyles}\n          {...rest}\n        >\n          {groups && groups.length > 0\n            ? groups.map((groupItems, index) => (\n                <BubbleGroup key={index}>\n                  {groupItems}\n                </BubbleGroup>\n              ))\n            : null}\n          {children}\n        </div>\n      </BubbleToolbarContext.Provider>\n    );\n  }\n) as BubbleToolbarComponent;\n\nBubbleToolbar.displayName = 'BubbleToolbar';\nBubbleToolbar.Group = BubbleGroup;\n\n","import { createContext, useContext } from 'react';\nimport type { BubbleToolbarTheme, BubbleToolbarSize } from './types';\n\nexport interface BubbleToolbarContextValue {\n  size: BubbleToolbarSize;\n  theme: BubbleToolbarTheme;\n  blurred: boolean;\n  blurAmount: number | string;\n  itemGap: number | string;\n  bordered: boolean;\n  shadow: boolean | string;\n}\n\nexport const defaultContextValue: BubbleToolbarContextValue = {\n  size: 'md',\n  theme: 'glass',\n  blurred: true,\n  blurAmount: 16,\n  itemGap: 8,\n  bordered: true,\n  shadow: true,\n};\n\nexport const BubbleToolbarContext = createContext<BubbleToolbarContextValue>(defaultContextValue);\n\nexport const useBubbleToolbar = (): BubbleToolbarContextValue => {\n  return useContext(BubbleToolbarContext);\n};\n\n","import React, { forwardRef } from 'react';\nimport type { BubbleGroupProps, BubbleShape } from './types';\nimport { useBubbleToolbar } from './context';\nimport { getValidChildren } from './utils/children';\nimport { resolveSize, formatPx, getGlassStyles } from './utils/styles';\n\nexport const BubbleGroup = forwardRef<HTMLDivElement, BubbleGroupProps>(\n  (\n    {\n      children,\n      shape: explicitShape,\n      size: explicitSize,\n      itemGap: explicitItemGap,\n      className = '',\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const context = useBubbleToolbar();\n\n    const validChildren = getValidChildren(children);\n    const count = validChildren.length;\n\n    // Morphological logic:\n    // 1 node => circle\n    // > 1 node => pill / rounded rectangle\n    const computedShape: BubbleShape =\n      explicitShape || (count <= 1 ? 'circle' : 'pill');\n\n    const effectiveSize = resolveSize(explicitSize || context.size);\n    const effectiveItemGap =\n      explicitItemGap !== undefined ? explicitItemGap : context.itemGap;\n\n    const glassStyles = getGlassStyles(\n      context.theme,\n      context.blurred,\n      context.blurAmount,\n      context.bordered,\n      context.shadow\n    );\n\n    const isCircle = computedShape === 'circle';\n\n    const groupStyles: React.CSSProperties = {\n      ...glassStyles,\n      height: `${effectiveSize}px`,\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      userSelect: 'none',\n      ...(isCircle\n        ? {\n            width: `${effectiveSize}px`,\n            minWidth: `${effectiveSize}px`,\n            borderRadius: '9999px',\n            justifyContent: 'center',\n            padding: 0,\n          }\n        : {\n            width: 'auto',\n            minWidth: `${effectiveSize}px`,\n            borderRadius: '9999px',\n            flexDirection: 'row',\n            justifyContent: 'flex-start',\n            paddingLeft: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,\n            paddingRight: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,\n            gap: formatPx(effectiveItemGap),\n          }),\n      ...style,\n    };\n\n    const combinedClassName = [\n      'bubble-group',\n      `bubble-group--${computedShape}`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={combinedClassName}\n        style={groupStyles}\n        data-shape={computedShape}\n        data-items-count={count}\n        {...rest}\n      >\n        {validChildren}\n      </div>\n    );\n  }\n);\n\nBubbleGroup.displayName = 'BubbleGroup';\n\n","import React, { ReactNode } from 'react';\n\n/**\n * Returns an array of non-null, non-undefined, non-boolean child elements.\n * Unpacks React.Fragment if encountered at the top level.\n */\nexport function getValidChildren(children: ReactNode): ReactNode[] {\n  const result: ReactNode[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (child === null || child === undefined || typeof child === 'boolean') {\n      return;\n    }\n\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      const fragmentChildren = getValidChildren(\n        (child.props as { children?: ReactNode }).children\n      );\n      result.push(...fragmentChildren);\n    } else {\n      result.push(child);\n    }\n  });\n\n  return result;\n}\n\n","import type { CSSProperties } from 'react';\nimport type { BubbleToolbarTheme, BubbleToolbarSize } from '../types';\n\nexport function resolveSize(size: BubbleToolbarSize): number {\n  if (typeof size === 'number') return size;\n  switch (size) {\n    case 'sm':\n      return 40;\n    case 'lg':\n      return 56;\n    case 'md':\n    default:\n      return 48;\n  }\n}\n\nexport function formatPx(val: number | string): string {\n  return typeof val === 'number' ? `${val}px` : val;\n}\n\nexport function getGlassStyles(\n  theme: BubbleToolbarTheme,\n  blurred: boolean,\n  blurAmount: number | string,\n  bordered: boolean,\n  shadow: boolean | string\n): CSSProperties {\n  const blurVal = formatPx(blurAmount);\n\n  // Background and border tint based on theme\n  let background: string;\n  let borderColor: string;\n  let color: string;\n\n  switch (theme) {\n    case 'dark':\n      background = blurred ? 'rgba(24, 24, 27, 0.72)' : 'rgba(24, 24, 27, 0.95)';\n      borderColor = 'rgba(255, 255, 255, 0.12)';\n      color = '#f4f4f5';\n      break;\n    case 'light':\n      background = blurred ? 'rgba(255, 255, 255, 0.75)' : 'rgba(255, 255, 255, 0.95)';\n      borderColor = 'rgba(0, 0, 0, 0.08)';\n      color = '#18181b';\n      break;\n    case 'auto':\n      background = 'var(--bubble-bg, rgba(255, 255, 255, 0.75))';\n      borderColor = 'var(--bubble-border, rgba(0, 0, 0, 0.08))';\n      color = 'var(--bubble-fg, #18181b)';\n      break;\n    case 'glass':\n    default:\n      // Neutral luminous frosted glass\n      background = blurred ? 'rgba(255, 255, 255, 0.65)' : 'rgba(255, 255, 255, 0.92)';\n      borderColor = 'rgba(255, 255, 255, 0.4)';\n      color = '#09090b';\n      break;\n  }\n\n  const boxShadow =\n    typeof shadow === 'string'\n      ? shadow\n      : shadow\n      ? '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06)'\n      : 'none';\n\n  return {\n    backgroundColor: background,\n    backdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : undefined,\n    WebkitBackdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : undefined,\n    border: bordered ? `1px solid ${borderColor}` : 'none',\n    boxShadow,\n    color,\n    transition: 'all 0.25s cubic-bezier(0.16, 1, 0.3, 1)',\n  };\n}\n\n","import React, { forwardRef, useState } from 'react';\nimport type { BubbleIconButtonProps } from '../types';\n\n/**\n * Standard inline SVG icons for quick prototyping out-of-the-box\n */\nconst ICONS: Record<string, React.ReactNode> = {\n  search: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n    </svg>\n  ),\n  theme: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"5\" />\n      <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n      <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n      <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n      <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n      <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n      <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n      <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n      <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n    </svg>\n  ),\n  chat: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n    </svg>\n  ),\n  notifications: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\" />\n      <path d=\"M13.73 21a2 2 0 0 1-3.46 0\" />\n    </svg>\n  ),\n  logo: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polygon points=\"12 2 2 7 12 12 22 7 12 2\" />\n      <polyline points=\"2 17 12 22 22 17\" />\n      <polyline points=\"2 12 12 17 22 12\" />\n    </svg>\n  ),\n  close: (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  ),\n};\n\nexport const BubbleIconButton = forwardRef<HTMLButtonElement, BubbleIconButtonProps>(\n  (\n    {\n      name,\n      icon,\n      active = false,\n      badge,\n      tooltip,\n      children,\n      className = '',\n      style,\n      onMouseEnter,\n      onMouseLeave,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = useState(false);\n\n    const iconContent = icon || (name ? ICONS[name] : null) || children;\n    const computedAriaLabel = ariaLabel || tooltip || (name ? `${name} button` : 'button');\n\n    const buttonStyles: React.CSSProperties = {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '36px',\n      height: '36px',\n      borderRadius: '50%',\n      border: 'none',\n      background: active\n        ? 'rgba(0, 0, 0, 0.08)'\n        : isHovered\n        ? 'rgba(0, 0, 0, 0.05)'\n        : 'transparent',\n      color: 'inherit',\n      cursor: 'pointer',\n      padding: 0,\n      margin: 0,\n      outline: 'none',\n      transition: 'background-color 0.15s ease, transform 0.15s ease',\n      transform: isHovered ? 'scale(1.06)' : 'scale(1)',\n      flexShrink: 0,\n      ...style,\n    };\n\n    const badgeStyles: React.CSSProperties = {\n      position: 'absolute',\n      top: '4px',\n      right: '4px',\n      minWidth: '7px',\n      height: '7px',\n      padding: typeof badge === 'number' || typeof badge === 'string' ? '1px 3px' : 0,\n      borderRadius: '9999px',\n      backgroundColor: '#ef4444',\n      color: '#ffffff',\n      fontSize: '9px',\n      fontWeight: 'bold',\n      lineHeight: '1',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      boxShadow: '0 0 0 1.5px rgba(255, 255, 255, 0.9)',\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        title={tooltip}\n        aria-label={computedAriaLabel}\n        className={`bubble-icon-button ${active ? 'bubble-icon-button--active' : ''} ${className}`.trim()}\n        style={buttonStyles}\n        onMouseEnter={(e) => {\n          setIsHovered(true);\n          onMouseEnter?.(e);\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false);\n          onMouseLeave?.(e);\n        }}\n        {...rest}\n      >\n        {iconContent}\n        {badge ? (\n          <span className=\"bubble-icon-button__badge\" style={badgeStyles}>\n            {typeof badge !== 'boolean' ? badge : null}\n          </span>\n        ) : null}\n      </button>\n    );\n  }\n);\n\nBubbleIconButton.displayName = 'BubbleIconButton';\n\n","import React, { forwardRef } from 'react';\nimport type { BubbleAreaProps } from '../types';\nimport { formatPx } from '../utils/styles';\n\nexport const BubbleArea = forwardRef<HTMLDivElement, BubbleAreaProps>(\n  (\n    {\n      children,\n      minWidth = 120,\n      maxWidth,\n      className = '',\n      style,\n      ...rest\n    },\n    ref\n  ) => {\n    const areaStyles: React.CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      minWidth: formatPx(minWidth),\n      maxWidth: maxWidth ? formatPx(maxWidth) : undefined,\n      flex: '1 1 auto',\n      fontSize: '14px',\n      color: 'inherit',\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={`bubble-area ${className}`.trim()}\n        style={areaStyles}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nBubbleArea.displayName = 'BubbleArea';\n\n"],"mappings":"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","names":["forwardRef","jsx","forwardRef","forwardRef","jsx","jsxs","forwardRef","jsx","forwardRef"]}
+{"version":3,"sources":["../src/activity.ts","../src/BubbleGroup.tsx","../src/context.ts","../src/utils/children.ts","../src/utils/styles.ts","../src/BubbleToolbar.tsx","../src/components/BubbleArea.tsx","../src/components/BubbleIconButton.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface BubbleActivityValue {\n  isBusy: boolean;\n  run: <T>(task: () => Promise<T>) => Promise<T>;\n}\n\nexport const BubbleActivityContext = createContext<BubbleActivityValue | null>(null);\n\nexport const useBubbleActivity = (): BubbleActivityValue => {\n  const activity = useContext(BubbleActivityContext);\n  if (!activity) {\n    throw new Error('useBubbleActivity must be used inside a BubbleGroup or BubbleToolbar.Group.');\n  }\n  return activity;\n};\n\nexport const useGroupActivity = (externalBusy: boolean): BubbleActivityValue => {\n  const [pending, setPending] = useState(0);\n  const mounted = useRef(true);\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const run = useCallback(async <T>(task: () => Promise<T>): Promise<T> => {\n    if (mounted.current) {\n      setPending((count) => count + 1);\n    }\n    try {\n      return await task();\n    } finally {\n      if (mounted.current) {\n        setPending((count) => count - 1);\n      }\n    }\n  }, []);\n\n  const isBusy = externalBusy || pending > 0;\n  return useMemo(() => ({ isBusy, run }), [isBusy, run]);\n};\n","import type { CSSProperties } from 'react';\nimport { forwardRef } from 'react';\nimport { BubbleActivityContext, useGroupActivity } from './activity';\nimport { useBubbleToolbar } from './context';\nimport type { BubbleGroupProps, BubbleShape } from './types';\nimport { getValidChildren } from './utils/children';\nimport { formatPx, getGlassStyles, resolveSize } from './utils/styles';\n\nexport const BubbleGroup = forwardRef<HTMLDivElement, BubbleGroupProps>(\n  (\n    {\n      children,\n      shape: explicitShape,\n      size: explicitSize,\n      itemGap: explicitItemGap,\n      busy = false,\n      activityColors,\n      activityDuration,\n      className = '',\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const context = useBubbleToolbar();\n    const activity = useGroupActivity(Boolean(context.busy || busy));\n    const colors = activityColors ?? context.activityColors ?? ['#22d3ee', '#8b5cf6', '#ec4899'];\n    const duration = activityDuration ?? context.activityDuration ?? 2.4;\n\n    const validChildren = getValidChildren(children);\n    const count = validChildren.length;\n\n    // Morphological logic:\n    // 1 node => circle\n    // > 1 node => pill / rounded rectangle\n    const computedShape: BubbleShape = explicitShape || (count <= 1 ? 'circle' : 'pill');\n\n    const effectiveSize = resolveSize(explicitSize || context.size);\n    const effectiveItemGap = explicitItemGap !== undefined ? explicitItemGap : context.itemGap;\n\n    const glassStyles = getGlassStyles(\n      context.theme,\n      context.blurred,\n      context.blurAmount,\n      context.bordered,\n      context.shadow,\n    );\n\n    const isCircle = computedShape === 'circle';\n\n    const groupStyles: CSSProperties & Record<`--bubble-activity-${string}`, string> = {\n      '--bubble-activity-color-1': colors[0],\n      '--bubble-activity-color-2': colors[1],\n      '--bubble-activity-color-3': colors[2],\n      '--bubble-activity-duration': `${Number.isFinite(duration) && duration > 0 ? duration : 2.4}s`,\n      ...glassStyles,\n      height: `${effectiveSize}px`,\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      userSelect: 'none',\n      ...(isCircle\n        ? {\n            width: `${effectiveSize}px`,\n            minWidth: `${effectiveSize}px`,\n            borderRadius: '9999px',\n            justifyContent: 'center',\n            padding: 0,\n          }\n        : {\n            width: 'auto',\n            minWidth: `${effectiveSize}px`,\n            borderRadius: '9999px',\n            flexDirection: 'row',\n            justifyContent: 'flex-start',\n            paddingLeft: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,\n            paddingRight: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,\n            gap: formatPx(effectiveItemGap),\n          }),\n      ...style,\n    };\n\n    const combinedClassName = [\n      'bubble-group',\n      `bubble-group--${computedShape}`,\n      activity.isBusy && 'bubble-group--busy',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <BubbleActivityContext.Provider value={activity}>\n        {/* biome-ignore lint/a11y/useSemanticElements: This toolbar group is not a form fieldset and exposes an HTMLDivElement ref. */}\n        <div\n          ref={ref}\n          role=\"group\"\n          className={combinedClassName}\n          style={groupStyles}\n          data-shape={computedShape}\n          data-items-count={count}\n          {...rest}\n          aria-busy={activity.isBusy}\n        >\n          {validChildren}\n        </div>\n      </BubbleActivityContext.Provider>\n    );\n  },\n);\n\nBubbleGroup.displayName = 'BubbleGroup';\n","import { createContext, useContext } from 'react';\nimport type { BubbleActivityProps, BubbleToolbarSize, BubbleToolbarTheme } from './types';\n\nexport interface BubbleToolbarContextValue extends BubbleActivityProps {\n  size: BubbleToolbarSize;\n  theme: BubbleToolbarTheme;\n  blurred: boolean;\n  blurAmount: number | string;\n  itemGap: number | string;\n  bordered: boolean;\n  shadow: boolean | string;\n}\n\nexport const defaultContextValue: BubbleToolbarContextValue = {\n  size: 'md',\n  theme: 'glass',\n  blurred: true,\n  blurAmount: 16,\n  itemGap: 8,\n  bordered: true,\n  shadow: true,\n};\n\nexport const BubbleToolbarContext = createContext<BubbleToolbarContextValue>(defaultContextValue);\n\nexport const useBubbleToolbar = (): BubbleToolbarContextValue => {\n  return useContext(BubbleToolbarContext);\n};\n","import type { ReactNode } from 'react';\nimport { Children, Fragment, isValidElement } from 'react';\n\n/**\n * Returns an array of non-null, non-undefined, non-boolean child elements.\n * Unpacks Fragment if encountered at the top level.\n */\nexport function getValidChildren(children: ReactNode): ReactNode[] {\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (child === null || child === undefined || typeof child === 'boolean') {\n      return;\n    }\n\n    if (isValidElement(child) && child.type === Fragment) {\n      const fragmentChildren = getValidChildren((child.props as { children?: ReactNode }).children);\n      result.push(...fragmentChildren);\n    } else {\n      result.push(child);\n    }\n  });\n\n  return result;\n}\n","import type { CSSProperties } from 'react';\nimport type { BubbleToolbarSize, BubbleToolbarTheme } from '../types';\n\nexport function resolveSize(size: BubbleToolbarSize): number {\n  if (typeof size === 'number') {\n    return size;\n  }\n  switch (size) {\n    case 'sm':\n      return 40;\n    case 'lg':\n      return 56;\n    default:\n      return 48;\n  }\n}\n\nexport function formatPx(val: number | string): string {\n  return typeof val === 'number' ? `${val}px` : val;\n}\n\nexport function getGlassStyles(\n  theme: BubbleToolbarTheme,\n  blurred: boolean,\n  blurAmount: number | string,\n  bordered: boolean,\n  shadow: boolean | string,\n): CSSProperties {\n  const blurVal = formatPx(blurAmount);\n\n  // Background and border tint based on theme\n  let background: string;\n  let borderColor: string;\n  let color: string;\n\n  switch (theme) {\n    case 'dark':\n      background = blurred ? 'rgba(24, 24, 27, 0.72)' : 'rgba(24, 24, 27, 0.95)';\n      borderColor = 'rgba(255, 255, 255, 0.12)';\n      color = '#f4f4f5';\n      break;\n    case 'light':\n      background = blurred ? 'rgba(255, 255, 255, 0.75)' : 'rgba(255, 255, 255, 0.95)';\n      borderColor = 'rgba(0, 0, 0, 0.08)';\n      color = '#18181b';\n      break;\n    case 'auto':\n      background = 'var(--bubble-bg, rgba(255, 255, 255, 0.75))';\n      borderColor = 'var(--bubble-border, rgba(0, 0, 0, 0.08))';\n      color = 'var(--bubble-fg, #18181b)';\n      break;\n    default:\n      // Neutral luminous frosted glass\n      background = blurred ? 'rgba(255, 255, 255, 0.65)' : 'rgba(255, 255, 255, 0.92)';\n      borderColor = 'rgba(255, 255, 255, 0.4)';\n      color = '#09090b';\n      break;\n  }\n\n  const boxShadow =\n    typeof shadow === 'string'\n      ? shadow\n      : shadow\n        ? '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06)'\n        : 'none';\n\n  return {\n    backgroundColor: background,\n    backdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : undefined,\n    WebkitBackdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : undefined,\n    border: bordered ? `1px solid ${borderColor}` : 'none',\n    boxShadow,\n    color,\n    transition: 'all 0.25s cubic-bezier(0.16, 1, 0.3, 1)',\n  };\n}\n","import type { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useMemo } from 'react';\nimport { BubbleGroup } from './BubbleGroup';\nimport type { BubbleToolbarContextValue } from './context';\nimport { BubbleToolbarContext } from './context';\nimport type { BubbleToolbarProps } from './types';\nimport { formatPx } from './utils/styles';\n\nexport interface BubbleToolbarComponent\n  extends ForwardRefExoticComponent<BubbleToolbarProps & RefAttributes<HTMLDivElement>> {\n  Group: typeof BubbleGroup;\n}\n\nexport const BubbleToolbar = forwardRef<HTMLDivElement, BubbleToolbarProps>(\n  (\n    {\n      groups,\n      children,\n      position = 'bottom',\n      theme = 'glass',\n      size = 'md',\n      blurred = true,\n      blurAmount = 16,\n      groupGap = 8,\n      itemGap = 8,\n      bordered = true,\n      shadow = true,\n      busy = false,\n      activityColors,\n      activityDuration,\n      className = '',\n      style,\n      ariaLabel = 'Toolbar',\n      ...rest\n    },\n    ref,\n  ) => {\n    const contextValue = useMemo<BubbleToolbarContextValue>(\n      () => ({\n        size,\n        theme,\n        blurred,\n        blurAmount,\n        itemGap,\n        bordered,\n        shadow,\n        busy,\n        activityColors,\n        activityDuration,\n      }),\n      [\n        size,\n        theme,\n        blurred,\n        blurAmount,\n        itemGap,\n        bordered,\n        shadow,\n        busy,\n        activityColors,\n        activityDuration,\n      ],\n    );\n\n    // Compute positioning styles\n    const getPositionStyles = (): CSSProperties => {\n      switch (position) {\n        case 'bottom':\n          return {\n            position: 'fixed',\n            bottom: '24px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            zIndex: 1000,\n          };\n        case 'top':\n          return {\n            position: 'fixed',\n            top: '24px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            zIndex: 1000,\n          };\n        case 'static':\n          return {\n            position: 'relative',\n          };\n        default:\n          return {};\n      }\n    };\n\n    const containerStyles: CSSProperties = {\n      ...getPositionStyles(),\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: formatPx(groupGap),\n      maxWidth: 'calc(100vw - 32px)',\n      overflowX: 'auto',\n      overflowY: 'hidden',\n      padding: '4px',\n      boxSizing: 'border-box',\n      scrollbarWidth: 'none', // Firefox\n      msOverflowStyle: 'none', // IE/Edge\n      WebkitOverflowScrolling: 'touch',\n      pointerEvents: 'auto',\n      ...style,\n    };\n\n    const combinedClassName = [\n      'bubble-toolbar',\n      `bubble-toolbar--${position}`,\n      `bubble-toolbar--${theme}`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <BubbleToolbarContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"toolbar\"\n          aria-label={ariaLabel}\n          className={combinedClassName}\n          style={containerStyles}\n          {...rest}\n        >\n          {groups && groups.length > 0\n            ? groups.map((groupItems, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: The groups array API identifies groups by position; use compound children for keyed groups.\n                <BubbleGroup key={index}>{groupItems}</BubbleGroup>\n              ))\n            : null}\n          {children}\n        </div>\n      </BubbleToolbarContext.Provider>\n    );\n  },\n) as BubbleToolbarComponent;\n\nBubbleToolbar.displayName = 'BubbleToolbar';\nBubbleToolbar.Group = BubbleGroup;\n","import type { CSSProperties } from 'react';\nimport { forwardRef } from 'react';\nimport type { BubbleAreaProps } from '../types';\nimport { formatPx } from '../utils/styles';\n\nexport const BubbleArea = forwardRef<HTMLDivElement, BubbleAreaProps>(\n  ({ children, minWidth = 120, maxWidth, className = '', style, ...rest }, ref) => {\n    const areaStyles: CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      minWidth: formatPx(minWidth),\n      maxWidth: maxWidth ? formatPx(maxWidth) : undefined,\n      flex: '1 1 auto',\n      fontSize: '14px',\n      color: 'inherit',\n      ...style,\n    };\n\n    return (\n      <div ref={ref} className={`bubble-area ${className}`.trim()} style={areaStyles} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n\nBubbleArea.displayName = 'BubbleArea';\n","import type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport type { BubbleIconButtonProps } from '../types';\n\n/**\n * Standard inline SVG icons for quick prototyping out-of-the-box\n */\nconst ICONS: Record<string, ReactNode> = {\n  search: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n    </svg>\n  ),\n  theme: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"5\" />\n      <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n      <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n      <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n      <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n      <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n      <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n      <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n      <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n    </svg>\n  ),\n  chat: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n    </svg>\n  ),\n  notifications: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\" />\n      <path d=\"M13.73 21a2 2 0 0 1-3.46 0\" />\n    </svg>\n  ),\n  logo: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polygon points=\"12 2 2 7 12 12 22 7 12 2\" />\n      <polyline points=\"2 17 12 22 22 17\" />\n      <polyline points=\"2 12 12 17 22 12\" />\n    </svg>\n  ),\n  close: (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  ),\n};\n\nexport const BubbleIconButton = forwardRef<HTMLButtonElement, BubbleIconButtonProps>(\n  (\n    {\n      name,\n      icon,\n      active = false,\n      badge,\n      tooltip,\n      children,\n      className = '',\n      style,\n      onMouseEnter,\n      onMouseLeave,\n      ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [isHovered, setIsHovered] = useState(false);\n\n    const iconContent = icon || (name ? ICONS[name] : null) || children;\n    const computedAriaLabel = ariaLabel || tooltip || (name ? `${name} button` : 'button');\n\n    const buttonStyles: CSSProperties = {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '36px',\n      height: '36px',\n      borderRadius: '50%',\n      border: 'none',\n      background: active\n        ? 'rgba(0, 0, 0, 0.08)'\n        : isHovered\n          ? 'rgba(0, 0, 0, 0.05)'\n          : 'transparent',\n      color: 'inherit',\n      cursor: 'pointer',\n      padding: 0,\n      margin: 0,\n      outline: 'none',\n      transition: 'background-color 0.15s ease, transform 0.15s ease',\n      transform: isHovered ? 'scale(1.06)' : 'scale(1)',\n      flexShrink: 0,\n      ...style,\n    };\n\n    const badgeStyles: CSSProperties = {\n      position: 'absolute',\n      top: '4px',\n      right: '4px',\n      minWidth: '7px',\n      height: '7px',\n      padding: typeof badge === 'number' || typeof badge === 'string' ? '1px 3px' : 0,\n      borderRadius: '9999px',\n      backgroundColor: '#ef4444',\n      color: '#ffffff',\n      fontSize: '9px',\n      fontWeight: 'bold',\n      lineHeight: '1',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      boxShadow: '0 0 0 1.5px rgba(255, 255, 255, 0.9)',\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        title={tooltip}\n        aria-label={computedAriaLabel}\n        className={`bubble-icon-button ${active ? 'bubble-icon-button--active' : ''} ${className}`.trim()}\n        style={buttonStyles}\n        onMouseEnter={(e) => {\n          setIsHovered(true);\n          onMouseEnter?.(e);\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false);\n          onMouseLeave?.(e);\n        }}\n        {...rest}\n      >\n        {iconContent}\n        {badge ? (\n          <span className=\"bubble-icon-button__badge\" style={badgeStyles}>\n            {typeof badge !== 'boolean' ? badge : null}\n          </span>\n        ) : null}\n      </button>\n    );\n  },\n);\n\nBubbleIconButton.displayName = 'BubbleIconButton';\n"],"mappings":"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","names":["createContext","useContext","forwardRef","useMemo","jsx","forwardRef","useMemo","forwardRef","jsx","forwardRef","forwardRef","useState","jsx","jsxs"]}

package/dist/styles.css

@@ -57,7 +57,9 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
+  transition:
+    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.2s ease;
 }
 
 .bubble-group:hover {
@@ -87,7 +89,10 @@
   background: transparent;
   cursor: pointer;
   border-radius: 50%;
-  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    transform 0.15s ease,
+    color 0.15s ease;
 }
 
 .bubble-icon-button:hover {
@@ -113,9 +118,9 @@
 /* Media Query: Auto Dark Theme */
 @media (prefers-color-scheme: dark) {
   .bubble-toolbar--auto .bubble-group {
-    background-color: var(--bubble-dark-bg) !important;
-    border-color: var(--bubble-dark-border) !important;
-    color: #f4f4f5 !important;
+    --bubble-bg: var(--bubble-dark-bg);
+    --bubble-border: var(--bubble-dark-border);
+    --bubble-fg: #f4f4f5;
   }
 
   .bubble-toolbar--auto .bubble-icon-button:hover {
@@ -123,3 +128,68 @@
   }
 }
 
+/* Activity rotates the gradient angle, never the bubble or its content. */
+@property --bubble-activity-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.bubble-group--busy {
+  position: relative;
+}
+
+.bubble-group--busy::before,
+.bubble-group--busy::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 1;
+  /* A visible static border remains when CSS masking is unsupported. */
+  border: 2px solid var(--bubble-activity-color-1, #22d3ee);
+}
+
+.bubble-group--busy::after {
+  inset: 1px;
+  filter: blur(1.5px);
+  opacity: 0.65;
+}
+
+@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
+  .bubble-group--busy::before,
+  .bubble-group--busy::after {
+    border: 0;
+    padding: 2px;
+    background: conic-gradient(
+      from var(--bubble-activity-angle),
+      var(--bubble-activity-color-1, #22d3ee),
+      var(--bubble-activity-color-2, #8b5cf6),
+      var(--bubble-activity-color-3, #ec4899),
+      var(--bubble-activity-color-1, #22d3ee)
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    animation: bubble-activity-orbit var(--bubble-activity-duration, 2.4s) linear infinite;
+  }
+}
+
+@keyframes bubble-activity-orbit {
+  to {
+    --bubble-activity-angle: 360deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble-group--busy::before,
+  .bubble-group--busy::after {
+    animation: none;
+  }
+}

package/package.json

@@ -1,57 +1,90 @@
 {
-  "name": "bubble-toolbar",
-  "version": "0.1.0",
-  "description": "Floating, responsive, blurred glass toolbar component for React 18 and 19 with group-based circular and pill layouts.",
-  "author": "",
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+    "name": "bubble-toolbar",
+    "version": "1.0.0",
+    "description": "Floating, responsive, blurred glass toolbar component for React 18 and 19 with group-based circular and pill layouts.",
+    "author": "ElJijuna",
+    "license": "MIT",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        },
+        "./styles.css": "./dist/styles.css"
     },
-    "./styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -p 6006 --disable-telemetry",
-    "build-storybook": "storybook build --disable-telemetry"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/react": "^8.6.19",
-    "@storybook/react-vite": "^8.6.19",
-    "@testing-library/dom": "^10.4.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.1",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^6.1.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^8.6.19",
-    "ts-jest": "^29.2.5",
-    "tsup": "^8.3.6",
-    "typescript": "^5.7.3",
-    "vite": "^8.3.4"
-  }
+    "files": [
+        "dist",
+        "CHANGELOG.md"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "typecheck": "tsc --noEmit",
+        "storybook": "storybook dev -p 6006 --disable-telemetry",
+        "build-storybook": "storybook build --disable-telemetry",
+        "lint": "eslint . --max-warnings=0",
+        "lint:fix": "eslint . --fix --max-warnings=0",
+        "format": "biome check --write .",
+        "format:check": "biome check .",
+        "check": "npm run lint && npm run format:check && npm run typecheck && npm test -- --runInBand",
+        "prepack": "npm run build",
+        "release": "node scripts/release.mjs",
+        "release:dry-run": "semantic-release --dry-run --no-ci",
+        "commitlint": "commitlint"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.5.15",
+        "@commitlint/cli": "^21.2.4",
+        "@commitlint/config-conventional": "^21.2.4",
+        "@semantic-release/changelog": "^7.0.0",
+        "@semantic-release/commit-analyzer": "^13.0.1",
+        "@semantic-release/git": "^11.0.1",
+        "@semantic-release/github": "^12.0.10",
+        "@semantic-release/npm": "^13.2.0",
+        "@semantic-release/release-notes-generator": "^14.1.1",
+        "@storybook/addon-docs": "^10.6.2",
+        "@storybook/react": "^10.6.2",
+        "@storybook/react-vite": "^10.6.2",
+        "@testing-library/dom": "^10.4.2",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.2.0",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^22.13.1",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "@vitejs/plugin-react": "^6.1.2",
+        "conventional-changelog-conventionalcommits": "^9.3.1",
+        "eslint": "^10.13.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "semantic-release": "^25.0.9",
+        "storybook": "^10.6.2",
+        "super-configs": "^1.26.1",
+        "ts-jest": "^29.2.5",
+        "tsup": "^8.3.6",
+        "typescript": "^5.7.3",
+        "vite": "8.3.4"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ElJijuna/bubble-toolbar.git"
+    },
+    "homepage": "https://eljijuna.github.io/bubble-toolbar/",
+    "bugs": {
+        "url": "https://github.com/ElJijuna/bubble-toolbar/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
 }