@usefragments/ui 1.6.0 → 2.0.0

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

@@ -1,13 +1,13 @@
-const positioner = "_positioner_9o5yr_1";
-const popup = "_popup_9o5yr_6";
-const sm = "_sm_9o5yr_49";
-const lg = "_lg_9o5yr_54";
-const title = "_title_9o5yr_59";
-const description = "_description_9o5yr_69";
-const close = "_close_9o5yr_79";
-const arrow = "_arrow_9o5yr_163";
-const body = "_body_9o5yr_187";
-const footer = "_footer_9o5yr_191";
+const positioner = "_positioner_1ltdu_1";
+const popup = "_popup_1ltdu_6";
+const sm = "_sm_1ltdu_50";
+const lg = "_lg_1ltdu_55";
+const title = "_title_1ltdu_60";
+const description = "_description_1ltdu_70";
+const close = "_close_1ltdu_81";
+const arrow = "_arrow_1ltdu_168";
+const body = "_body_1ltdu_192";
+const footer = "_footer_1ltdu_196";
 const styles = {
   positioner,
   popup,

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

@@ -1,30 +1,31 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1xomg_1";
-const header = "_header_1xomg_8";
-const label = "_label_1xomg_20";
-const value = "_value_1xomg_24";
-const track = "_track_1xomg_29";
-const trackSm = "_trackSm_1xomg_38";
-const trackMd = "_trackMd_1xomg_45";
-const trackLg = "_trackLg_1xomg_52";
-const indicator = "_indicator_1xomg_59";
-const indicatorNeutral = "_indicatorNeutral_1xomg_66";
-const indicatorSuccess = "_indicatorSuccess_1xomg_70";
-const indicatorWarning = "_indicatorWarning_1xomg_74";
-const indicatorDanger = "_indicatorDanger_1xomg_78";
-const indicatorIndeterminate = "_indicatorIndeterminate_1xomg_82";
-const circular = "_circular_1xomg_98";
-const circularSvg = "_circularSvg_1xomg_107";
-const circularTrack = "_circularTrack_1xomg_113";
-const circularIndicator = "_circularIndicator_1xomg_118";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_1xomg_126";
-const circularIndicatorWarning = "_circularIndicatorWarning_1xomg_130";
-const circularIndicatorDanger = "_circularIndicatorDanger_1xomg_134";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_1xomg_138";
-const circularValue = "_circularValue_1xomg_155";
-const circularValueCompact = "_circularValueCompact_1xomg_161";
-const circularValueStandard = "_circularValueStandard_1xomg_169";
+const root = "_root_157pr_1";
+const header = "_header_157pr_8";
+const label = "_label_157pr_20";
+const value = "_value_157pr_24";
+const track = "_track_157pr_29";
+const trackSm = "_trackSm_157pr_38";
+const trackMd = "_trackMd_157pr_45";
+const trackLg = "_trackLg_157pr_52";
+const indicator = "_indicator_157pr_59";
+const indicatorNeutral = "_indicatorNeutral_157pr_66";
+const indicatorSuccess = "_indicatorSuccess_157pr_70";
+const indicatorWarning = "_indicatorWarning_157pr_74";
+const indicatorDanger = "_indicatorDanger_157pr_78";
+const indicatorIndeterminate = "_indicatorIndeterminate_157pr_82";
+const circular = "_circular_157pr_98";
+const circularSvg = "_circularSvg_157pr_107";
+const circularTrack = "_circularTrack_157pr_113";
+const circularIndicator = "_circularIndicator_157pr_118";
+const circularIndicatorNeutral = "_circularIndicatorNeutral_157pr_126";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_157pr_130";
+const circularIndicatorWarning = "_circularIndicatorWarning_157pr_134";
+const circularIndicatorDanger = "_circularIndicatorDanger_157pr_138";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_157pr_142";
+const circularValue = "_circularValue_157pr_159";
+const circularValueCompact = "_circularValueCompact_157pr_165";
+const circularValueStandard = "_circularValueStandard_157pr_173";
 const styles = {
   root,
   header,
@@ -44,6 +45,7 @@ const styles = {
   circularSvg,
   circularTrack,
   circularIndicator,
+  circularIndicatorNeutral,
   circularIndicatorSuccess,
   circularIndicatorWarning,
   circularIndicatorDanger,
@@ -56,6 +58,7 @@ exports.circular = circular;
 exports.circularIndicator = circularIndicator;
 exports.circularIndicatorDanger = circularIndicatorDanger;
 exports.circularIndicatorIndeterminate = circularIndicatorIndeterminate;
+exports.circularIndicatorNeutral = circularIndicatorNeutral;
 exports.circularIndicatorSuccess = circularIndicatorSuccess;
 exports.circularIndicatorWarning = circularIndicatorWarning;
 exports.circularSvg = circularSvg;

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

@@ -1,28 +1,29 @@
-const root = "_root_1xomg_1";
-const header = "_header_1xomg_8";
-const label = "_label_1xomg_20";
-const value = "_value_1xomg_24";
-const track = "_track_1xomg_29";
-const trackSm = "_trackSm_1xomg_38";
-const trackMd = "_trackMd_1xomg_45";
-const trackLg = "_trackLg_1xomg_52";
-const indicator = "_indicator_1xomg_59";
-const indicatorNeutral = "_indicatorNeutral_1xomg_66";
-const indicatorSuccess = "_indicatorSuccess_1xomg_70";
-const indicatorWarning = "_indicatorWarning_1xomg_74";
-const indicatorDanger = "_indicatorDanger_1xomg_78";
-const indicatorIndeterminate = "_indicatorIndeterminate_1xomg_82";
-const circular = "_circular_1xomg_98";
-const circularSvg = "_circularSvg_1xomg_107";
-const circularTrack = "_circularTrack_1xomg_113";
-const circularIndicator = "_circularIndicator_1xomg_118";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_1xomg_126";
-const circularIndicatorWarning = "_circularIndicatorWarning_1xomg_130";
-const circularIndicatorDanger = "_circularIndicatorDanger_1xomg_134";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_1xomg_138";
-const circularValue = "_circularValue_1xomg_155";
-const circularValueCompact = "_circularValueCompact_1xomg_161";
-const circularValueStandard = "_circularValueStandard_1xomg_169";
+const root = "_root_157pr_1";
+const header = "_header_157pr_8";
+const label = "_label_157pr_20";
+const value = "_value_157pr_24";
+const track = "_track_157pr_29";
+const trackSm = "_trackSm_157pr_38";
+const trackMd = "_trackMd_157pr_45";
+const trackLg = "_trackLg_157pr_52";
+const indicator = "_indicator_157pr_59";
+const indicatorNeutral = "_indicatorNeutral_157pr_66";
+const indicatorSuccess = "_indicatorSuccess_157pr_70";
+const indicatorWarning = "_indicatorWarning_157pr_74";
+const indicatorDanger = "_indicatorDanger_157pr_78";
+const indicatorIndeterminate = "_indicatorIndeterminate_157pr_82";
+const circular = "_circular_157pr_98";
+const circularSvg = "_circularSvg_157pr_107";
+const circularTrack = "_circularTrack_157pr_113";
+const circularIndicator = "_circularIndicator_157pr_118";
+const circularIndicatorNeutral = "_circularIndicatorNeutral_157pr_126";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_157pr_130";
+const circularIndicatorWarning = "_circularIndicatorWarning_157pr_134";
+const circularIndicatorDanger = "_circularIndicatorDanger_157pr_138";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_157pr_142";
+const circularValue = "_circularValue_157pr_159";
+const circularValueCompact = "_circularValueCompact_157pr_165";
+const circularValueStandard = "_circularValueStandard_157pr_173";
 const styles = {
   root,
   header,
@@ -42,6 +43,7 @@ const styles = {
   circularSvg,
   circularTrack,
   circularIndicator,
+  circularIndicatorNeutral,
   circularIndicatorSuccess,
   circularIndicatorWarning,
   circularIndicatorDanger,
@@ -55,6 +57,7 @@ export {
   circularIndicator,
   circularIndicatorDanger,
   circularIndicatorIndeterminate,
+  circularIndicatorNeutral,
   circularIndicatorSuccess,
   circularIndicatorWarning,
   circularSvg,

package/dist/components/Progress/index.cjs

@@ -5,12 +5,26 @@ const jsxRuntime = require("react/jsx-runtime");
 const progress = require("@base-ui/react/progress");
 const geometry = require("./geometry.cjs");
 const Progress_module = require("./Progress.module.scss.cjs");
+const INDICATOR_TONE_CLASS = {
+  accent: void 0,
+  neutral: Progress_module.default.indicatorNeutral,
+  success: Progress_module.default.indicatorSuccess,
+  warning: Progress_module.default.indicatorWarning,
+  danger: Progress_module.default.indicatorDanger
+};
+const CIRCULAR_TONE_CLASS = {
+  accent: void 0,
+  neutral: Progress_module.default.circularIndicatorNeutral,
+  success: Progress_module.default.circularIndicatorSuccess,
+  warning: Progress_module.default.circularIndicatorWarning,
+  danger: Progress_module.default.circularIndicatorDanger
+};
 function ProgressRoot({
   value = null,
   min = 0,
   max = 100,
   size = "md",
-  variant = "default",
+  tone = "accent",
   label,
   showValue = false,
   formatValue,
@@ -33,10 +47,7 @@ function ProgressRoot({
   ].filter(Boolean).join(" ");
   const indicatorClasses = [
     Progress_module.default.indicator,
-    variant === "neutral" && Progress_module.default.indicatorNeutral,
-    variant === "success" && Progress_module.default.indicatorSuccess,
-    variant === "warning" && Progress_module.default.indicatorWarning,
-    variant === "danger" && Progress_module.default.indicatorDanger,
+    INDICATOR_TONE_CLASS[tone],
     isIndeterminate && Progress_module.default.indicatorIndeterminate
   ].filter(Boolean).join(" ");
   const rootClasses = [Progress_module.default.root, className].filter(Boolean).join(" ");
@@ -73,7 +84,7 @@ function ProgressRoot({
 function CircularProgressRoot({
   value = null,
   size = "md",
-  variant = "default",
+  tone = "accent",
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
@@ -92,17 +103,15 @@ function CircularProgressRoot({
   const offset = circumference - percentage / 100 * circumference;
   const indicatorClasses = [
     Progress_module.default.circularIndicator,
-    variant === "success" && Progress_module.default.circularIndicatorSuccess,
-    variant === "warning" && Progress_module.default.circularIndicatorWarning,
-    variant === "danger" && Progress_module.default.circularIndicatorDanger,
+    CIRCULAR_TONE_CLASS[tone],
     isIndeterminate && Progress_module.default.circularIndicatorIndeterminate
   ].filter(Boolean).join(" ");
   const rootClasses = [Progress_module.default.circular, className].filter(Boolean).join(" ");
   const effectiveValueText = ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
   const circularStyle = {
-    "--_progress-diameter": `${geometry$1.diameter}px`,
-    "--_progress-dash-full": circumference,
-    "--_progress-dash-quarter": circumference / 4,
+    "--fui-progress-diameter": `${geometry$1.diameter}px`,
+    "--fui-progress-dash-full": circumference,
+    "--fui-progress-dash-quarter": circumference / 4,
     ...styleProp
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type ProgressSize } from "./geometry";
+export type ProgressTone = "accent" | "neutral" | "success" | "warning" | "danger";
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
     /** Current progress value (0-100). Null for indeterminate. */
     value?: number | null;
@@ -9,8 +10,10 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     max?: number;
     /** Size of the progress bar */
     size?: ProgressSize;
-    /** Color variant */
-    variant?: "default" | "neutral" | "success" | "warning" | "danger";
+    /** Colour. `accent` is the plain bar; `neutral` reads as a meter whose
+     * maximum is not a success; the semantic tones carry state.
+     * @default "accent" */
+    tone?: ProgressTone;
     /** Label text */
     label?: string;
     /** Show percentage value */
@@ -23,15 +26,16 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
     value?: number | null;
     /** Size of the circular progress */
     size?: ProgressSize;
-    /** Color variant */
-    variant?: "default" | "success" | "warning" | "danger";
+    /** Colour, same axis as the bar.
+     * @default "accent" */
+    tone?: ProgressTone;
     /** Show percentage in center */
     showValue?: boolean;
     /** Stroke width */
     strokeWidth?: number;
 }
-declare function ProgressRoot({ value, min, max, size, variant, label, showValue, formatValue, className, role, "aria-label": ariaLabel, "aria-valuetext": ariaValueText, ...htmlProps }: ProgressProps): import("react/jsx-runtime").JSX.Element;
-declare function CircularProgressRoot({ value, size, variant, showValue, strokeWidth: customStrokeWidth, className, style: styleProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+declare function ProgressRoot({ value, min, max, size, tone, label, showValue, formatValue, className, role, "aria-label": ariaLabel, "aria-valuetext": ariaValueText, ...htmlProps }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularProgressRoot({ value, size, tone, showValue, strokeWidth: customStrokeWidth, className, style: styleProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
 export declare const CircularProgress: typeof CircularProgressRoot;
 export declare const Progress: typeof ProgressRoot & {
     Root: typeof ProgressRoot;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,YAAY,CAAC;AAOpB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CAoEf;AAMD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CAuFvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,YAAY,CAAC;AAOpB,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;2BAEuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;2BACuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsBD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,IAAe,EACf,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CAiEf;AAMD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,IAAe,EACf,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CAuFvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/components/Progress/index.js

@@ -3,12 +3,26 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Progress as Progress$1 } from "@base-ui/react/progress";
 import { CIRCULAR_PROGRESS_GEOMETRY, resolveCircularStrokeWidth } from "./geometry.js";
 import styles from "./Progress.module.scss.js";
+const INDICATOR_TONE_CLASS = {
+  accent: void 0,
+  neutral: styles.indicatorNeutral,
+  success: styles.indicatorSuccess,
+  warning: styles.indicatorWarning,
+  danger: styles.indicatorDanger
+};
+const CIRCULAR_TONE_CLASS = {
+  accent: void 0,
+  neutral: styles.circularIndicatorNeutral,
+  success: styles.circularIndicatorSuccess,
+  warning: styles.circularIndicatorWarning,
+  danger: styles.circularIndicatorDanger
+};
 function ProgressRoot({
   value = null,
   min = 0,
   max = 100,
   size = "md",
-  variant = "default",
+  tone = "accent",
   label,
   showValue = false,
   formatValue,
@@ -31,10 +45,7 @@ function ProgressRoot({
   ].filter(Boolean).join(" ");
   const indicatorClasses = [
     styles.indicator,
-    variant === "neutral" && styles.indicatorNeutral,
-    variant === "success" && styles.indicatorSuccess,
-    variant === "warning" && styles.indicatorWarning,
-    variant === "danger" && styles.indicatorDanger,
+    INDICATOR_TONE_CLASS[tone],
     isIndeterminate && styles.indicatorIndeterminate
   ].filter(Boolean).join(" ");
   const rootClasses = [styles.root, className].filter(Boolean).join(" ");
@@ -71,7 +82,7 @@ function ProgressRoot({
 function CircularProgressRoot({
   value = null,
   size = "md",
-  variant = "default",
+  tone = "accent",
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
@@ -90,17 +101,15 @@ function CircularProgressRoot({
   const offset = circumference - percentage / 100 * circumference;
   const indicatorClasses = [
     styles.circularIndicator,
-    variant === "success" && styles.circularIndicatorSuccess,
-    variant === "warning" && styles.circularIndicatorWarning,
-    variant === "danger" && styles.circularIndicatorDanger,
+    CIRCULAR_TONE_CLASS[tone],
     isIndeterminate && styles.circularIndicatorIndeterminate
   ].filter(Boolean).join(" ");
   const rootClasses = [styles.circular, className].filter(Boolean).join(" ");
   const effectiveValueText = ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
   const circularStyle = {
-    "--_progress-diameter": `${geometry.diameter}px`,
-    "--_progress-dash-full": circumference,
-    "--_progress-dash-quarter": circumference / 4,
+    "--fui-progress-diameter": `${geometry.diameter}px`,
+    "--fui-progress-dash-full": circumference,
+    "--fui-progress-dash-quarter": circumference / 4,
     ...styleProp
   };
   return /* @__PURE__ */ jsxs(

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

@@ -1,38 +1,38 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const prompt = "_prompt_g4m9f_1";
-const fixed = "_fixed_g4m9f_60";
-const sticky = "_sticky_g4m9f_71";
-const seamless = "_seamless_g4m9f_86";
-const toolbar = "_toolbar_g4m9f_99";
-const textarea = "_textarea_g4m9f_104";
-const attachments = "_attachments_g4m9f_107";
-const tabs = "_tabs_g4m9f_112";
-const tabsInner = "_tabsInner_g4m9f_120";
-const attach = "_attach_g4m9f_107";
-const select = "_select_g4m9f_138";
-const modeButton = "_modeButton_g4m9f_139";
-const submit = "_submit_g4m9f_170";
-const tabButton = "_tabButton_g4m9f_231";
-const tabButtonActive = "_tabButtonActive_g4m9f_275";
-const actions = "_actions_g4m9f_290";
-const info = "_info_g4m9f_297";
-const actionButton = "_actionButton_g4m9f_304";
-const modeButtonActive = "_modeButtonActive_g4m9f_443";
-const attachment = "_attachment_g4m9f_107";
-const attachmentThumb = "_attachmentThumb_g4m9f_559";
-const attachmentName = "_attachmentName_g4m9f_567";
-const attachmentSize = "_attachmentSize_g4m9f_575";
-const attachmentRemove = "_attachmentRemove_g4m9f_581";
-const dragging = "_dragging_g4m9f_661";
-const usage = "_usage_g4m9f_669";
-const submitLoading = "_submitLoading_g4m9f_749";
-const submitSpinner = "_submitSpinner_g4m9f_753";
+const prompt = "_prompt_11mxt_1";
+const fixed = "_fixed_11mxt_61";
+const sticky = "_sticky_11mxt_72";
+const ghost = "_ghost_11mxt_87";
+const toolbar = "_toolbar_11mxt_100";
+const textarea = "_textarea_11mxt_105";
+const attachments = "_attachments_11mxt_108";
+const tabs = "_tabs_11mxt_113";
+const tabsInner = "_tabsInner_11mxt_121";
+const attach = "_attach_11mxt_108";
+const select = "_select_11mxt_139";
+const modeButton = "_modeButton_11mxt_140";
+const submit = "_submit_11mxt_171";
+const tabButton = "_tabButton_11mxt_236";
+const tabButtonActive = "_tabButtonActive_11mxt_286";
+const actions = "_actions_11mxt_302";
+const info = "_info_11mxt_309";
+const actionButton = "_actionButton_11mxt_316";
+const modeButtonActive = "_modeButtonActive_11mxt_460";
+const attachment = "_attachment_11mxt_108";
+const attachmentThumb = "_attachmentThumb_11mxt_575";
+const attachmentName = "_attachmentName_11mxt_583";
+const attachmentSize = "_attachmentSize_11mxt_591";
+const attachmentRemove = "_attachmentRemove_11mxt_597";
+const dragging = "_dragging_11mxt_679";
+const usage = "_usage_11mxt_687";
+const submitLoading = "_submitLoading_11mxt_766";
+const submitSpinner = "_submitSpinner_11mxt_770";
 const styles = {
   prompt,
   fixed,
   sticky,
-  seamless,
+  ghost,
   toolbar,
   textarea,
   attachments,
@@ -70,11 +70,11 @@ exports.attachments = attachments;
 exports.default = styles;
 exports.dragging = dragging;
 exports.fixed = fixed;
+exports.ghost = ghost;
 exports.info = info;
 exports.modeButton = modeButton;
 exports.modeButtonActive = modeButtonActive;
 exports.prompt = prompt;
-exports.seamless = seamless;
 exports.select = select;
 exports.sticky = sticky;
 exports.submit = submit;

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

@@ -1,36 +1,36 @@
-const prompt = "_prompt_g4m9f_1";
-const fixed = "_fixed_g4m9f_60";
-const sticky = "_sticky_g4m9f_71";
-const seamless = "_seamless_g4m9f_86";
-const toolbar = "_toolbar_g4m9f_99";
-const textarea = "_textarea_g4m9f_104";
-const attachments = "_attachments_g4m9f_107";
-const tabs = "_tabs_g4m9f_112";
-const tabsInner = "_tabsInner_g4m9f_120";
-const attach = "_attach_g4m9f_107";
-const select = "_select_g4m9f_138";
-const modeButton = "_modeButton_g4m9f_139";
-const submit = "_submit_g4m9f_170";
-const tabButton = "_tabButton_g4m9f_231";
-const tabButtonActive = "_tabButtonActive_g4m9f_275";
-const actions = "_actions_g4m9f_290";
-const info = "_info_g4m9f_297";
-const actionButton = "_actionButton_g4m9f_304";
-const modeButtonActive = "_modeButtonActive_g4m9f_443";
-const attachment = "_attachment_g4m9f_107";
-const attachmentThumb = "_attachmentThumb_g4m9f_559";
-const attachmentName = "_attachmentName_g4m9f_567";
-const attachmentSize = "_attachmentSize_g4m9f_575";
-const attachmentRemove = "_attachmentRemove_g4m9f_581";
-const dragging = "_dragging_g4m9f_661";
-const usage = "_usage_g4m9f_669";
-const submitLoading = "_submitLoading_g4m9f_749";
-const submitSpinner = "_submitSpinner_g4m9f_753";
+const prompt = "_prompt_11mxt_1";
+const fixed = "_fixed_11mxt_61";
+const sticky = "_sticky_11mxt_72";
+const ghost = "_ghost_11mxt_87";
+const toolbar = "_toolbar_11mxt_100";
+const textarea = "_textarea_11mxt_105";
+const attachments = "_attachments_11mxt_108";
+const tabs = "_tabs_11mxt_113";
+const tabsInner = "_tabsInner_11mxt_121";
+const attach = "_attach_11mxt_108";
+const select = "_select_11mxt_139";
+const modeButton = "_modeButton_11mxt_140";
+const submit = "_submit_11mxt_171";
+const tabButton = "_tabButton_11mxt_236";
+const tabButtonActive = "_tabButtonActive_11mxt_286";
+const actions = "_actions_11mxt_302";
+const info = "_info_11mxt_309";
+const actionButton = "_actionButton_11mxt_316";
+const modeButtonActive = "_modeButtonActive_11mxt_460";
+const attachment = "_attachment_11mxt_108";
+const attachmentThumb = "_attachmentThumb_11mxt_575";
+const attachmentName = "_attachmentName_11mxt_583";
+const attachmentSize = "_attachmentSize_11mxt_591";
+const attachmentRemove = "_attachmentRemove_11mxt_597";
+const dragging = "_dragging_11mxt_679";
+const usage = "_usage_11mxt_687";
+const submitLoading = "_submitLoading_11mxt_766";
+const submitSpinner = "_submitSpinner_11mxt_770";
 const styles = {
   prompt,
   fixed,
   sticky,
-  seamless,
+  ghost,
   toolbar,
   textarea,
   attachments,
@@ -69,11 +69,11 @@ export {
   styles as default,
   dragging,
   fixed,
+  ghost,
   info,
   modeButton,
   modeButtonActive,
   prompt,
-  seamless,
   select,
   sticky,
   submit,

package/dist/components/Prompt/index.cjs

@@ -101,8 +101,8 @@ function PromptRoot({
   maxRows = 8,
   autoResize = true,
   submitOnEnter = true,
-  variant = "default",
-  appearance = "panel",
+  placement = "inline",
+  variant = "outline",
   onFiles,
   accept,
   className,
@@ -167,9 +167,9 @@ function PromptRoot({
   } : null;
   const classes = [
     Prompt_module.default.prompt,
-    variant === "fixed" && Prompt_module.default.fixed,
-    variant === "sticky" && Prompt_module.default.sticky,
-    appearance === "seamless" && Prompt_module.default.seamless,
+    placement === "fixed" && Prompt_module.default.fixed,
+    placement === "sticky" && Prompt_module.default.sticky,
+    variant === "ghost" && Prompt_module.default.ghost,
     dragging && Prompt_module.default.dragging,
     disabled && Prompt_module.default.disabled,
     loading && Prompt_module.default.loading,
@@ -183,8 +183,8 @@ function PromptRoot({
       className: classes,
       "data-disabled": disabled || void 0,
       "data-loading": loading || void 0,
+      "data-placement": placement,
       "data-variant": variant,
-      "data-appearance": appearance,
       "data-dragging": dragging || void 0,
       children
     }
@@ -477,7 +477,7 @@ function PromptSubmit({
         index.Loading,
         {
           size: "sm",
-          variant: "spinner",
+          kind: "spinner",
           color: "current",
           label: "Submitting",
           className: Prompt_module.default.submitSpinner

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SelectOption, type SelectValue } from '../Select';
-export type PromptVariant = 'default' | 'fixed' | 'sticky';
-export type PromptAppearance = 'panel' | 'seamless';
+export type PromptPlacement = 'inline' | 'fixed' | 'sticky';
+export type PromptVariant = 'outline' | 'ghost';
 export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'defaultValue'> {
     children: React.ReactNode;
     /** Controlled input value */
@@ -32,13 +32,15 @@ export interface PromptProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     onFiles?: (files: File[]) => void;
     /** `accept` for the attach button's picker, e.g. `"image/*"`. */
     accept?: string;
-    /** Visual variant - "fixed" for bottom-fixed elevated prompt */
+    /** Where the card sits: `inline` in the flow, `fixed` to the viewport bottom,
+     * `sticky` to the content area (offset by `--fui-prompt-inset-left`).
+     * @default "inline" */
+    placement?: PromptPlacement;
+    /** Card chrome. `outline` keeps the toolbar as a filled footer under a rule;
+     * `ghost` makes the whole card one writing surface with the controls floating
+     * on it — the shape most agent composers use.
+     * @default "outline" */
     variant?: PromptVariant;
-    /** How the card is divided up. `panel` keeps the toolbar as a filled footer
-     * under a rule; `seamless` makes the whole card one writing surface with the
-     * controls floating on it — the shape most agent composers use.
-     * @default "panel" */
-    appearance?: PromptAppearance;
 }
 export interface PromptTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'rows' | 'disabled' | 'children'> {
     /** Override placeholder from context */
@@ -172,7 +174,7 @@ interface PromptContextValue {
     onFiles?: (files: File[]) => void;
 }
 declare function usePromptContext(): PromptContextValue;
-declare function PromptRoot({ children, value: controlledValue, defaultValue, onChange, onSubmit, placeholder, disabled, loading, minRows, maxRows, autoResize, submitOnEnter, variant, appearance, onFiles, accept, className, ...htmlProps }: PromptProps): import("react/jsx-runtime").JSX.Element;
+declare function PromptRoot({ children, value: controlledValue, defaultValue, onChange, onSubmit, placeholder, disabled, loading, minRows, maxRows, autoResize, submitOnEnter, placement, variant, onFiles, accept, className, ...htmlProps }: PromptProps): import("react/jsx-runtime").JSX.Element;
 declare function PromptTextarea({ placeholder: overridePlaceholder, className, onChange, onKeyDown, onPaste, 'aria-label': ariaLabel, ...htmlProps }: PromptTextareaProps): import("react/jsx-runtime").JSX.Element;
 declare function PromptToolbar({ children, className }: PromptToolbarProps): import("react/jsx-runtime").JSX.Element;
 declare function PromptTabs({ children, className }: PromptTabsProps): import("react/jsx-runtime").JSX.Element;