bubble-toolbar 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,441 @@
+// src/BubbleToolbar.tsx
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var defaultContextValue = {
+  size: "md",
+  theme: "glass",
+  blurred: true,
+  blurAmount: 16,
+  itemGap: 8,
+  bordered: true,
+  shadow: true
+};
+var BubbleToolbarContext = createContext(defaultContextValue);
+var useBubbleToolbar = () => {
+  return useContext(BubbleToolbarContext);
+};
+
+// src/BubbleGroup.tsx
+import { forwardRef } from "react";
+
+// src/utils/children.ts
+import React from "react";
+function getValidChildren(children) {
+  const result = [];
+  React.Children.forEach(children, (child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return;
+    }
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+      const fragmentChildren = getValidChildren(
+        child.props.children
+      );
+      result.push(...fragmentChildren);
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+
+// src/utils/styles.ts
+function resolveSize(size) {
+  if (typeof size === "number") return size;
+  switch (size) {
+    case "sm":
+      return 40;
+    case "lg":
+      return 56;
+    case "md":
+    default:
+      return 48;
+  }
+}
+function formatPx(val) {
+  return typeof val === "number" ? `${val}px` : val;
+}
+function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
+  const blurVal = formatPx(blurAmount);
+  let background;
+  let borderColor;
+  let color;
+  switch (theme) {
+    case "dark":
+      background = blurred ? "rgba(24, 24, 27, 0.72)" : "rgba(24, 24, 27, 0.95)";
+      borderColor = "rgba(255, 255, 255, 0.12)";
+      color = "#f4f4f5";
+      break;
+    case "light":
+      background = blurred ? "rgba(255, 255, 255, 0.75)" : "rgba(255, 255, 255, 0.95)";
+      borderColor = "rgba(0, 0, 0, 0.08)";
+      color = "#18181b";
+      break;
+    case "auto":
+      background = "var(--bubble-bg, rgba(255, 255, 255, 0.75))";
+      borderColor = "var(--bubble-border, rgba(0, 0, 0, 0.08))";
+      color = "var(--bubble-fg, #18181b)";
+      break;
+    case "glass":
+    default:
+      background = blurred ? "rgba(255, 255, 255, 0.65)" : "rgba(255, 255, 255, 0.92)";
+      borderColor = "rgba(255, 255, 255, 0.4)";
+      color = "#09090b";
+      break;
+  }
+  const boxShadow = typeof shadow === "string" ? shadow : shadow ? "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06)" : "none";
+  return {
+    backgroundColor: background,
+    backdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : void 0,
+    WebkitBackdropFilter: blurred ? `blur(${blurVal}) saturate(180%)` : void 0,
+    border: bordered ? `1px solid ${borderColor}` : "none",
+    boxShadow,
+    color,
+    transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)"
+  };
+}
+
+// src/BubbleGroup.tsx
+import { jsx } from "react/jsx-runtime";
+var BubbleGroup = forwardRef(
+  ({
+    children,
+    shape: explicitShape,
+    size: explicitSize,
+    itemGap: explicitItemGap,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const context = useBubbleToolbar();
+    const validChildren = getValidChildren(children);
+    const count = validChildren.length;
+    const computedShape = explicitShape || (count <= 1 ? "circle" : "pill");
+    const effectiveSize = resolveSize(explicitSize || context.size);
+    const effectiveItemGap = explicitItemGap !== void 0 ? explicitItemGap : context.itemGap;
+    const glassStyles = getGlassStyles(
+      context.theme,
+      context.blurred,
+      context.blurAmount,
+      context.bordered,
+      context.shadow
+    );
+    const isCircle = computedShape === "circle";
+    const groupStyles = {
+      ...glassStyles,
+      height: `${effectiveSize}px`,
+      boxSizing: "border-box",
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0,
+      userSelect: "none",
+      ...isCircle ? {
+        width: `${effectiveSize}px`,
+        minWidth: `${effectiveSize}px`,
+        borderRadius: "9999px",
+        justifyContent: "center",
+        padding: 0
+      } : {
+        width: "auto",
+        minWidth: `${effectiveSize}px`,
+        borderRadius: "9999px",
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        paddingLeft: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,
+        paddingRight: `${Math.max(12, Math.round(effectiveSize * 0.28))}px`,
+        gap: formatPx(effectiveItemGap)
+      },
+      ...style
+    };
+    const combinedClassName = [
+      "bubble-group",
+      `bubble-group--${computedShape}`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: combinedClassName,
+        style: groupStyles,
+        "data-shape": computedShape,
+        "data-items-count": count,
+        ...rest,
+        children: validChildren
+      }
+    );
+  }
+);
+BubbleGroup.displayName = "BubbleGroup";
+
+// src/BubbleToolbar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var BubbleToolbar = forwardRef2(
+  ({
+    groups,
+    children,
+    position = "bottom",
+    theme = "glass",
+    size = "md",
+    blurred = true,
+    blurAmount = 16,
+    groupGap = 8,
+    itemGap = 8,
+    bordered = true,
+    shadow = true,
+    className = "",
+    style,
+    ariaLabel = "Toolbar",
+    ...rest
+  }, ref) => {
+    const contextValue = useMemo(
+      () => ({
+        size,
+        theme,
+        blurred,
+        blurAmount,
+        itemGap,
+        bordered,
+        shadow
+      }),
+      [size, theme, blurred, blurAmount, itemGap, bordered, shadow]
+    );
+    const getPositionStyles = () => {
+      switch (position) {
+        case "bottom":
+          return {
+            position: "fixed",
+            bottom: "24px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 1e3
+          };
+        case "top":
+          return {
+            position: "fixed",
+            top: "24px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 1e3
+          };
+        case "static":
+          return {
+            position: "relative"
+          };
+        case "custom":
+        default:
+          return {};
+      }
+    };
+    const containerStyles = {
+      ...getPositionStyles(),
+      display: "inline-flex",
+      alignItems: "center",
+      gap: formatPx(groupGap),
+      maxWidth: "calc(100vw - 32px)",
+      overflowX: "auto",
+      overflowY: "hidden",
+      padding: "4px",
+      boxSizing: "border-box",
+      scrollbarWidth: "none",
+      // Firefox
+      msOverflowStyle: "none",
+      // IE/Edge
+      WebkitOverflowScrolling: "touch",
+      pointerEvents: "auto",
+      ...style
+    };
+    const combinedClassName = [
+      "bubble-toolbar",
+      `bubble-toolbar--${position}`,
+      `bubble-toolbar--${theme}`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx2(BubbleToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "toolbar",
+        "aria-label": ariaLabel,
+        className: combinedClassName,
+        style: containerStyles,
+        ...rest,
+        children: [
+          groups && groups.length > 0 ? groups.map((groupItems, index) => /* @__PURE__ */ jsx2(BubbleGroup, { children: groupItems }, index)) : null,
+          children
+        ]
+      }
+    ) });
+  }
+);
+BubbleToolbar.displayName = "BubbleToolbar";
+BubbleToolbar.Group = BubbleGroup;
+
+// src/components/BubbleIconButton.tsx
+import { forwardRef as forwardRef3, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ICONS = {
+  search: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx3("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] }),
+  theme: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsx3("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsx3("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsx3("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsx3("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] }),
+  chat: /* @__PURE__ */ jsx3("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
+  notifications: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ jsx3("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] }),
+  logo: /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+    /* @__PURE__ */ jsx3("polyline", { points: "2 17 12 22 22 17" }),
+    /* @__PURE__ */ jsx3("polyline", { points: "2 12 12 17 22 12" })
+  ] }),
+  close: /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+};
+var BubbleIconButton = forwardRef3(
+  ({
+    name,
+    icon,
+    active = false,
+    badge,
+    tooltip,
+    children,
+    className = "",
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    ariaLabel,
+    ...rest
+  }, ref) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const iconContent = icon || (name ? ICONS[name] : null) || children;
+    const computedAriaLabel = ariaLabel || tooltip || (name ? `${name} button` : "button");
+    const buttonStyles = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "36px",
+      height: "36px",
+      borderRadius: "50%",
+      border: "none",
+      background: active ? "rgba(0, 0, 0, 0.08)" : isHovered ? "rgba(0, 0, 0, 0.05)" : "transparent",
+      color: "inherit",
+      cursor: "pointer",
+      padding: 0,
+      margin: 0,
+      outline: "none",
+      transition: "background-color 0.15s ease, transform 0.15s ease",
+      transform: isHovered ? "scale(1.06)" : "scale(1)",
+      flexShrink: 0,
+      ...style
+    };
+    const badgeStyles = {
+      position: "absolute",
+      top: "4px",
+      right: "4px",
+      minWidth: "7px",
+      height: "7px",
+      padding: typeof badge === "number" || typeof badge === "string" ? "1px 3px" : 0,
+      borderRadius: "9999px",
+      backgroundColor: "#ef4444",
+      color: "#ffffff",
+      fontSize: "9px",
+      fontWeight: "bold",
+      lineHeight: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxShadow: "0 0 0 1.5px rgba(255, 255, 255, 0.9)"
+    };
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        type: "button",
+        title: tooltip,
+        "aria-label": computedAriaLabel,
+        className: `bubble-icon-button ${active ? "bubble-icon-button--active" : ""} ${className}`.trim(),
+        style: buttonStyles,
+        onMouseEnter: (e) => {
+          setIsHovered(true);
+          onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          setIsHovered(false);
+          onMouseLeave?.(e);
+        },
+        ...rest,
+        children: [
+          iconContent,
+          badge ? /* @__PURE__ */ jsx3("span", { className: "bubble-icon-button__badge", style: badgeStyles, children: typeof badge !== "boolean" ? badge : null }) : null
+        ]
+      }
+    );
+  }
+);
+BubbleIconButton.displayName = "BubbleIconButton";
+
+// src/components/BubbleArea.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var BubbleArea = forwardRef4(
+  ({
+    children,
+    minWidth = 120,
+    maxWidth,
+    className = "",
+    style,
+    ...rest
+  }, ref) => {
+    const areaStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      minWidth: formatPx(minWidth),
+      maxWidth: maxWidth ? formatPx(maxWidth) : void 0,
+      flex: "1 1 auto",
+      fontSize: "14px",
+      color: "inherit",
+      ...style
+    };
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        ref,
+        className: `bubble-area ${className}`.trim(),
+        style: areaStyles,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BubbleArea.displayName = "BubbleArea";
+export {
+  BubbleArea,
+  BubbleGroup,
+  BubbleIconButton,
+  BubbleToolbar,
+  BubbleToolbarContext,
+  formatPx,
+  getGlassStyles,
+  getValidChildren,
+  resolveSize,
+  useBubbleToolbar
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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"]}

package/dist/styles.css

@@ -0,0 +1,125 @@
+/**
+ * Bubble Toolbar - Frosted Glass & Responsive Layout
+ */
+
+:root {
+  --bubble-size-sm: 40px;
+  --bubble-size-md: 48px;
+  --bubble-size-lg: 56px;
+  --bubble-blur: 16px;
+  --bubble-glass-bg: rgba(255, 255, 255, 0.65);
+  --bubble-glass-border: rgba(255, 255, 255, 0.35);
+  --bubble-glass-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
+  --bubble-dark-bg: rgba(24, 24, 27, 0.72);
+  --bubble-dark-border: rgba(255, 255, 255, 0.12);
+}
+
+/* Toolbar container */
+.bubble-toolbar {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-x;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.bubble-toolbar::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Positions */
+.bubble-toolbar--bottom {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+.bubble-toolbar--top {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+.bubble-toolbar--static {
+  position: relative;
+}
+
+/* Bubble Groups */
+.bubble-group {
+  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;
+}
+
+.bubble-group:hover {
+  transform: translateY(-2px);
+}
+
+/* Circle shape: 1 node */
+.bubble-group--circle {
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px;
+  justify-content: center;
+  padding: 0;
+}
+
+/* Pill shape: > 1 nodes */
+.bubble-group--pill {
+  border-radius: 9999px;
+  flex-direction: row;
+}
+
+/* Icon Button */
+.bubble-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
+}
+
+.bubble-icon-button:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.bubble-icon-button:active {
+  transform: scale(0.94);
+}
+
+.bubble-icon-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Area */
+.bubble-area {
+  display: inline-flex;
+  align-items: center;
+  flex: 1 1 auto;
+}
+
+/* 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-toolbar--auto .bubble-icon-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "bubble-toolbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "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"
+    },
+    "./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"
+  }
+}