@usefragments/ui 1.3.2 → 1.4.0

package/dist/chart.cjs

@@ -1,5 +1,27 @@
 "use client";
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -24,18 +46,40 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 let _RechartsTooltip = null;
 let _RechartsLegend = null;
-let _chartLoaded = false;
+let _chartLoadPromise = null;
 let _chartFailed = false;
 function loadChartDeps() {
-  if (_chartLoaded) return;
-  _chartLoaded = true;
-  try {
-    const rc = require("recharts");
-    _RechartsTooltip = rc.Tooltip;
-    _RechartsLegend = rc.Legend;
-  } catch {
-    _chartFailed = true;
+  if (!_chartLoadPromise) {
+    _chartLoadPromise = (async () => {
+      try {
+        const rc = await import("recharts");
+        _RechartsTooltip = rc.Tooltip;
+        _RechartsLegend = rc.Legend;
+      } catch {
+        _chartFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
+          );
+        }
+      }
+    })();
   }
+  return _chartLoadPromise;
+}
+function useChartDeps() {
+  const [, rerender] = React__namespace.useReducer((n) => n + 1, 0);
+  React__namespace.useEffect(() => {
+    if (_RechartsTooltip || _chartFailed) return;
+    let active = true;
+    void loadChartDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _RechartsTooltip !== null;
 }
 const ChartConfigContext = React__namespace.createContext(null);
 function useChartConfig() {
@@ -148,7 +192,7 @@ function ChartTooltip({
   content,
   ...props
 }) {
-  loadChartDeps();
+  const chartReady = useChartDeps();
   const defaultContent = React__namespace.useCallback(
     (tooltipProps) => /* @__PURE__ */ jsxRuntime.jsx(
       ChartTooltipContent,
@@ -163,12 +207,7 @@ function ChartTooltip({
     ),
     [indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter]
   );
-  if (_chartFailed || !_RechartsTooltip) {
-    if (_chartFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
-      );
-    }
+  if (!chartReady || !_RechartsTooltip) {
     return null;
   }
   const RechartsTooltipComponent = _RechartsTooltip;
@@ -202,14 +241,9 @@ function ChartLegendContent({ payload }) {
   }) });
 }
 function ChartLegend({ content, ...props }) {
-  loadChartDeps();
+  const chartReady = useChartDeps();
   const defaultContent = (legendProps) => /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, { ...legendProps });
-  if (_chartFailed || !_RechartsLegend) {
-    if (_chartFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
-      );
-    }
+  if (!chartReady || !_RechartsLegend) {
     return null;
   }
   const RechartsLegendComponent = _RechartsLegend;
@@ -226,7 +260,9 @@ const Chart = Object.assign(ChartContainer, {
   Tooltip: ChartTooltip,
   TooltipContent: ChartTooltipContent,
   Legend: ChartLegend,
-  LegendContent: ChartLegendContent
+  LegendContent: ChartLegendContent,
+  /** Start resolving recharts before first render (optional). */
+  preload: loadChartDeps
 });
 exports.Chart = Chart;
 exports.ChartContainer = ChartContainer;

package/dist/chart.js

@@ -5,18 +5,40 @@ import { mergeAriaIds } from "./utils/aria.js";
 import styles from "./components/Chart/Chart.module.scss.js";
 let _RechartsTooltip = null;
 let _RechartsLegend = null;
-let _chartLoaded = false;
+let _chartLoadPromise = null;
 let _chartFailed = false;
 function loadChartDeps() {
-  if (_chartLoaded) return;
-  _chartLoaded = true;
-  try {
-    const rc = require("recharts");
-    _RechartsTooltip = rc.Tooltip;
-    _RechartsLegend = rc.Legend;
-  } catch {
-    _chartFailed = true;
+  if (!_chartLoadPromise) {
+    _chartLoadPromise = (async () => {
+      try {
+        const rc = await import("recharts");
+        _RechartsTooltip = rc.Tooltip;
+        _RechartsLegend = rc.Legend;
+      } catch {
+        _chartFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
+          );
+        }
+      }
+    })();
   }
+  return _chartLoadPromise;
+}
+function useChartDeps() {
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => {
+    if (_RechartsTooltip || _chartFailed) return;
+    let active = true;
+    void loadChartDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _RechartsTooltip !== null;
 }
 const ChartConfigContext = React.createContext(null);
 function useChartConfig() {
@@ -129,7 +151,7 @@ function ChartTooltip({
   content,
   ...props
 }) {
-  loadChartDeps();
+  const chartReady = useChartDeps();
   const defaultContent = React.useCallback(
     (tooltipProps) => /* @__PURE__ */ jsx(
       ChartTooltipContent,
@@ -144,12 +166,7 @@ function ChartTooltip({
     ),
     [indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter]
   );
-  if (_chartFailed || !_RechartsTooltip) {
-    if (_chartFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
-      );
-    }
+  if (!chartReady || !_RechartsTooltip) {
     return null;
   }
   const RechartsTooltipComponent = _RechartsTooltip;
@@ -183,14 +200,9 @@ function ChartLegendContent({ payload }) {
   }) });
 }
 function ChartLegend({ content, ...props }) {
-  loadChartDeps();
+  const chartReady = useChartDeps();
   const defaultContent = (legendProps) => /* @__PURE__ */ jsx(ChartLegendContent, { ...legendProps });
-  if (_chartFailed || !_RechartsLegend) {
-    if (_chartFailed && process.env.NODE_ENV === "development") {
-      console.warn(
-        "[@usefragments/ui] Chart: recharts is not installed. Install it with: npm install recharts"
-      );
-    }
+  if (!chartReady || !_RechartsLegend) {
     return null;
   }
   const RechartsLegendComponent = _RechartsLegend;
@@ -207,7 +219,9 @@ const Chart = Object.assign(ChartContainer, {
   Tooltip: ChartTooltip,
   TooltipContent: ChartTooltipContent,
   Legend: ChartLegend,
-  LegendContent: ChartLegendContent
+  LegendContent: ChartLegendContent,
+  /** Start resolving recharts before first render (optional). */
+  preload: loadChartDeps
 });
 export {
   Chart,

package/dist/codeblock.cjs

@@ -160,19 +160,27 @@ function dedent(str) {
   }
   return lines.map((line) => line.slice(minIndent)).join("\n");
 }
-function normalizeIndentation(str) {
+const INDENTATION_SIGNIFICANT_LANGUAGES = /* @__PURE__ */ new Set([
+  "yaml",
+  "yml",
+  "json",
+  "python",
+  "py"
+]);
+function normalizeIndentation(str, language) {
   var _a, _b;
   const lines = str.split("\n");
   if (lines.length <= 1) return str;
+  const firstLineCounts = INDENTATION_SIGNIFICANT_LANGUAGES.has(language);
   let minIndent = Infinity;
   const firstLineIndent = ((_a = lines[0].match(/^(\s*)/)) == null ? void 0 : _a[1].length) ?? 0;
-  for (let i = 1; i < lines.length; i += 1) {
+  for (let i = firstLineCounts ? 0 : 1; i < lines.length; i += 1) {
     const line = lines[i];
     if (line.trim().length === 0) continue;
     const indent = ((_b = line.match(/^(\s*)/)) == null ? void 0 : _b[1].length) ?? 0;
     minIndent = Math.min(minIndent, indent);
   }
-  if (firstLineIndent > 0) {
+  if (!firstLineCounts && firstLineIndent > 0) {
     minIndent = Math.min(minIndent, firstLineIndent);
   }
   if (minIndent === Infinity || minIndent === 0) return str;
@@ -299,10 +307,10 @@ function formatLongJsxTagLine(line) {
 function formatLongJsxTags(code) {
   return code.split("\n").flatMap((line) => formatLongJsxTagLine(line).split("\n")).join("\n");
 }
-function normalizeCode(code) {
+function normalizeCode(code, language) {
   const trimmed = code.trim();
   if (trimmed.length === 0) return "";
-  const normalized = normalizeIndentation(trimmed);
+  const normalized = normalizeIndentation(trimmed, language);
   const dedented = dedent(normalized);
   const withoutTrailingWhitespace = trimTrailingWhitespace(dedented);
   return formatLongJsxTags(withoutTrailingWhitespace);
@@ -391,7 +399,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
   const [copied, setCopied] = React.useState(false);
   const [highlight, setHighlight] = React.useState({ html: "", loading: true });
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
-  const trimmedCode = React.useMemo(() => normalizeCode(code), [code]);
+  const trimmedCode = React.useMemo(() => normalizeCode(code, language), [code, language]);
   const codeLines = trimmedCode.split("\n");
   const totalLines = codeLines.length;
   const shouldShowCollapse = collapsible && totalLines > collapsedLines;

package/dist/codeblock.js

@@ -120,19 +120,27 @@ function dedent(str) {
   }
   return lines.map((line) => line.slice(minIndent)).join("\n");
 }
-function normalizeIndentation(str) {
+const INDENTATION_SIGNIFICANT_LANGUAGES = /* @__PURE__ */ new Set([
+  "yaml",
+  "yml",
+  "json",
+  "python",
+  "py"
+]);
+function normalizeIndentation(str, language) {
   var _a, _b;
   const lines = str.split("\n");
   if (lines.length <= 1) return str;
+  const firstLineCounts = INDENTATION_SIGNIFICANT_LANGUAGES.has(language);
   let minIndent = Infinity;
   const firstLineIndent = ((_a = lines[0].match(/^(\s*)/)) == null ? void 0 : _a[1].length) ?? 0;
-  for (let i = 1; i < lines.length; i += 1) {
+  for (let i = firstLineCounts ? 0 : 1; i < lines.length; i += 1) {
     const line = lines[i];
     if (line.trim().length === 0) continue;
     const indent = ((_b = line.match(/^(\s*)/)) == null ? void 0 : _b[1].length) ?? 0;
     minIndent = Math.min(minIndent, indent);
   }
-  if (firstLineIndent > 0) {
+  if (!firstLineCounts && firstLineIndent > 0) {
     minIndent = Math.min(minIndent, firstLineIndent);
   }
   if (minIndent === Infinity || minIndent === 0) return str;
@@ -259,10 +267,10 @@ function formatLongJsxTagLine(line) {
 function formatLongJsxTags(code) {
   return code.split("\n").flatMap((line) => formatLongJsxTagLine(line).split("\n")).join("\n");
 }
-function normalizeCode(code) {
+function normalizeCode(code, language) {
   const trimmed = code.trim();
   if (trimmed.length === 0) return "";
-  const normalized = normalizeIndentation(trimmed);
+  const normalized = normalizeIndentation(trimmed, language);
   const dedented = dedent(normalized);
   const withoutTrailingWhitespace = trimTrailingWhitespace(dedented);
   return formatLongJsxTags(withoutTrailingWhitespace);
@@ -351,7 +359,7 @@ const CodeBlockBase = React.forwardRef(function CodeBlock2({
   const [copied, setCopied] = useState(false);
   const [highlight, setHighlight] = useState({ html: "", loading: true });
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const trimmedCode = useMemo(() => normalizeCode(code), [code]);
+  const trimmedCode = useMemo(() => normalizeCode(code, language), [code, language]);
   const codeLines = trimmedCode.split("\n");
   const totalLines = codeLines.length;
   const shouldShowCollapse = collapsible && totalLines > collapsedLines;

package/dist/colorpicker.cjs

@@ -1,5 +1,27 @@
 "use client";
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -26,15 +48,38 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 let _HexColorPicker = null;
-let _colorfulLoaded = false;
+let _colorfulLoadPromise = null;
+let _colorfulFailed = false;
 function loadColorfulDeps() {
-  if (_colorfulLoaded) return;
-  _colorfulLoaded = true;
-  try {
-    const rc = require("react-colorful");
-    _HexColorPicker = rc.HexColorPicker;
-  } catch {
+  if (!_colorfulLoadPromise) {
+    _colorfulLoadPromise = (async () => {
+      try {
+        const rc = await import("react-colorful");
+        _HexColorPicker = rc.HexColorPicker;
+      } catch {
+        _colorfulFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] ColorPicker: react-colorful is not installed. Install it with: npm install react-colorful"
+          );
+        }
+      }
+    })();
   }
+  return _colorfulLoadPromise;
+}
+function useColorfulDeps() {
+  const [, rerender] = React__namespace.useReducer((n) => n + 1, 0);
+  React__namespace.useEffect(() => {
+    if (_HexColorPicker || _colorfulFailed) return;
+    let active = true;
+    void loadColorfulDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
 }
 const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
   label,
@@ -53,7 +98,7 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
   const resolvedHelperText = helperText ?? description;
-  loadColorfulDeps();
+  useColorfulDeps();
   const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
   const [inputValue, setInputValue] = React__namespace.useState(value ?? defaultValue);
   const displayValue = value !== void 0 ? value : internalValue;
@@ -145,6 +190,8 @@ const ColorPickerRoot = React__namespace.forwardRef(function ColorPicker2({
   );
 });
 const ColorPicker = Object.assign(ColorPickerRoot, {
-  Root: ColorPickerRoot
+  Root: ColorPickerRoot,
+  /** Start resolving react-colorful before first render (optional). */
+  preload: loadColorfulDeps
 });
 exports.ColorPicker = ColorPicker;

package/dist/colorpicker.js

@@ -7,15 +7,38 @@ import { useResolvedControlSize } from "./components/ComponentDefaults/index.js"
 import { Input } from "./components/Input/index.js";
 import styles from "./components/ColorPicker/ColorPicker.module.scss.js";
 let _HexColorPicker = null;
-let _colorfulLoaded = false;
+let _colorfulLoadPromise = null;
+let _colorfulFailed = false;
 function loadColorfulDeps() {
-  if (_colorfulLoaded) return;
-  _colorfulLoaded = true;
-  try {
-    const rc = require("react-colorful");
-    _HexColorPicker = rc.HexColorPicker;
-  } catch {
+  if (!_colorfulLoadPromise) {
+    _colorfulLoadPromise = (async () => {
+      try {
+        const rc = await import("react-colorful");
+        _HexColorPicker = rc.HexColorPicker;
+      } catch {
+        _colorfulFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] ColorPicker: react-colorful is not installed. Install it with: npm install react-colorful"
+          );
+        }
+      }
+    })();
   }
+  return _colorfulLoadPromise;
+}
+function useColorfulDeps() {
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => {
+    if (_HexColorPicker || _colorfulFailed) return;
+    let active = true;
+    void loadColorfulDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
 }
 const ColorPickerRoot = React.forwardRef(function ColorPicker2({
   label,
@@ -34,7 +57,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
 }, ref) {
   const size = useResolvedControlSize(sizeProp);
   const resolvedHelperText = helperText ?? description;
-  loadColorfulDeps();
+  useColorfulDeps();
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const [inputValue, setInputValue] = React.useState(value ?? defaultValue);
   const displayValue = value !== void 0 ? value : internalValue;
@@ -126,7 +149,9 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
   );
 });
 const ColorPicker = Object.assign(ColorPickerRoot, {
-  Root: ColorPickerRoot
+  Root: ColorPickerRoot,
+  /** Start resolving react-colorful before first render (optional). */
+  preload: loadColorfulDeps
 });
 export {
   ColorPicker

package/dist/components/Badge/Badge.module.scss.cjs

@@ -1,26 +1,28 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const badge = "_badge_pckit_1";
-const sm = "_sm_pckit_14";
-const md = "_md_pckit_19";
-const lg = "_lg_pckit_24";
-const success = "_success_pckit_34";
-const warning = "_warning_pckit_39";
-const error = "_error_pckit_44";
-const info = "_info_pckit_49";
-const outline = "_outline_pckit_54";
-const label = "_label_pckit_60";
-const dim = "_dim_pckit_71";
-const active = "_active_pckit_82";
-const dot = "_dot_pckit_88";
-const icon = "_icon_pckit_100";
-const remove = "_remove_pckit_105";
+const badge = "_badge_1luxf_1";
+const sm = "_sm_1luxf_14";
+const md = "_md_1luxf_19";
+const lg = "_lg_1luxf_24";
+const success = "_success_1luxf_34";
+const warning = "_warning_1luxf_39";
+const error = "_error_1luxf_44";
+const info = "_info_1luxf_49";
+const outline = "_outline_1luxf_54";
+const label = "_label_1luxf_60";
+const dim = "_dim_1luxf_71";
+const active = "_active_1luxf_82";
+const dot = "_dot_1luxf_88";
+const dotPulse = "_dotPulse_1luxf_100";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_1luxf_1";
+const icon = "_icon_1luxf_114";
+const remove = "_remove_1luxf_119";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_pckit_29",
+  "default": "_default_1luxf_29",
   success,
   warning,
   error,
@@ -30,6 +32,9 @@ const styles = {
   dim,
   active,
   dot,
+  dotPulse,
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_1luxf_1",
+  fuiBadgeDotPulse,
   icon,
   remove
 };
@@ -38,7 +43,9 @@ exports.badge = badge;
 exports.default = styles;
 exports.dim = dim;
 exports.dot = dot;
+exports.dotPulse = dotPulse;
 exports.error = error;
+exports.fuiBadgeDotPulse = fuiBadgeDotPulse;
 exports.icon = icon;
 exports.info = info;
 exports.label = label;

package/dist/components/Badge/Badge.module.scss.js

@@ -1,24 +1,26 @@
-const badge = "_badge_pckit_1";
-const sm = "_sm_pckit_14";
-const md = "_md_pckit_19";
-const lg = "_lg_pckit_24";
-const success = "_success_pckit_34";
-const warning = "_warning_pckit_39";
-const error = "_error_pckit_44";
-const info = "_info_pckit_49";
-const outline = "_outline_pckit_54";
-const label = "_label_pckit_60";
-const dim = "_dim_pckit_71";
-const active = "_active_pckit_82";
-const dot = "_dot_pckit_88";
-const icon = "_icon_pckit_100";
-const remove = "_remove_pckit_105";
+const badge = "_badge_1luxf_1";
+const sm = "_sm_1luxf_14";
+const md = "_md_1luxf_19";
+const lg = "_lg_1luxf_24";
+const success = "_success_1luxf_34";
+const warning = "_warning_1luxf_39";
+const error = "_error_1luxf_44";
+const info = "_info_1luxf_49";
+const outline = "_outline_1luxf_54";
+const label = "_label_1luxf_60";
+const dim = "_dim_1luxf_71";
+const active = "_active_1luxf_82";
+const dot = "_dot_1luxf_88";
+const dotPulse = "_dotPulse_1luxf_100";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_1luxf_1";
+const icon = "_icon_1luxf_114";
+const remove = "_remove_1luxf_119";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_pckit_29",
+  "default": "_default_1luxf_29",
   success,
   warning,
   error,
@@ -28,6 +30,9 @@ const styles = {
   dim,
   active,
   dot,
+  dotPulse,
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_1luxf_1",
+  fuiBadgeDotPulse,
   icon,
   remove
 };
@@ -37,7 +42,9 @@ export {
   styles as default,
   dim,
   dot,
+  dotPulse,
   error,
+  fuiBadgeDotPulse,
   icon,
   info,
   label,

package/dist/components/Badge/index.cjs

@@ -27,6 +27,7 @@ const BadgeRoot = React__namespace.forwardRef(function Badge2({
   variant = "default",
   size = "md",
   dot = false,
+  dotPulse = false,
   dotColor,
   icon,
   active = false,
@@ -57,7 +58,13 @@ const BadgeRoot = React__namespace.forwardRef(function Badge2({
       role: role ?? (announce ? "status" : void 0),
       "aria-label": effectiveAriaLabel,
       children: [
-        dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.dot, "aria-hidden": "true" }),
+        dot && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: [Badge_module.default.dot, dotPulse && Badge_module.default.dotPulse].filter(Boolean).join(" "),
+            "aria-hidden": "true"
+          }
+        ),
         icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.icon, "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Badge/index.d.ts

@@ -21,6 +21,9 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: "sm" | "md" | "lg";
     /** Show a status dot before the label */
     dot?: boolean;
+    /** Breathe the status dot, for a state that is still happening rather than
+     * one that has settled. Respects `prefers-reduced-motion`. */
+    dotPulse?: boolean;
     /** Color for the leading status dot. Applies to `variant="label"` (and the
      * generic `dot` prop). Accepts any CSS color including CSS custom properties. */
     dotColor?: string;

package/dist/components/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;iEAS6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7F;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;qFACiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuED,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;iEAS6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7F;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;kEAC8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6ED,eAAO,MAAM,KAAK;;CAEhB,CAAC"}