@usefragments/ui 1.7.0 → 2.0.0

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

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_11925_1";
-const topleft = "_topleft_11925_14";
-const topcenter = "_topcenter_11925_19";
-const topright = "_topright_11925_25";
-const bottomleft = "_bottomleft_11925_30";
-const bottomcenter = "_bottomcenter_11925_36";
-const bottomright = "_bottomright_11925_43";
-const toast = "_toast_11925_49";
-const toastEnter = "_toastEnter_11925_1";
-const description = "_description_11925_66";
-const icon = "_icon_11925_80";
-const success = "_success_11925_84";
-const title = "_title_11925_88";
-const error = "_error_11925_94";
-const warning = "_warning_11925_104";
-const info = "_info_11925_114";
-const content = "_content_11925_145";
-const action = "_action_11925_170";
-const close = "_close_11925_236";
+const container = "_container_vtzde_1";
+const topleft = "_topleft_vtzde_14";
+const topcenter = "_topcenter_vtzde_19";
+const topright = "_topright_vtzde_25";
+const bottomleft = "_bottomleft_vtzde_30";
+const bottomcenter = "_bottomcenter_vtzde_36";
+const bottomright = "_bottomright_vtzde_43";
+const toast = "_toast_vtzde_49";
+const toastEnter = "_toastEnter_vtzde_1";
+const description = "_description_vtzde_79";
+const toneSuccess = "_toneSuccess_vtzde_93";
+const toneDanger = "_toneDanger_vtzde_100";
+const toneWarning = "_toneWarning_vtzde_107";
+const toneInfo = "_toneInfo_vtzde_114";
+const icon = "_icon_vtzde_121";
+const content = "_content_vtzde_136";
+const title = "_title_vtzde_143";
+const action = "_action_vtzde_162";
+const close = "_close_vtzde_163";
 const styles = {
   container,
   topleft,
@@ -30,14 +30,13 @@ const styles = {
   toast,
   toastEnter,
   description,
-  "default": "_default_11925_80",
+  toneSuccess,
+  toneDanger,
+  toneWarning,
+  toneInfo,
   icon,
-  success,
-  title,
-  error,
-  warning,
-  info,
   content,
+  title,
   action,
   close
 };
@@ -50,14 +49,14 @@ exports.container = container;
 exports.content = content;
 exports.default = styles;
 exports.description = description;
-exports.error = error;
 exports.icon = icon;
-exports.info = info;
-exports.success = success;
 exports.title = title;
 exports.toast = toast;
 exports.toastEnter = toastEnter;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;
 exports.topcenter = topcenter;
 exports.topleft = topleft;
 exports.topright = topright;
-exports.warning = warning;

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

@@ -1,22 +1,22 @@
-const container = "_container_11925_1";
-const topleft = "_topleft_11925_14";
-const topcenter = "_topcenter_11925_19";
-const topright = "_topright_11925_25";
-const bottomleft = "_bottomleft_11925_30";
-const bottomcenter = "_bottomcenter_11925_36";
-const bottomright = "_bottomright_11925_43";
-const toast = "_toast_11925_49";
-const toastEnter = "_toastEnter_11925_1";
-const description = "_description_11925_66";
-const icon = "_icon_11925_80";
-const success = "_success_11925_84";
-const title = "_title_11925_88";
-const error = "_error_11925_94";
-const warning = "_warning_11925_104";
-const info = "_info_11925_114";
-const content = "_content_11925_145";
-const action = "_action_11925_170";
-const close = "_close_11925_236";
+const container = "_container_vtzde_1";
+const topleft = "_topleft_vtzde_14";
+const topcenter = "_topcenter_vtzde_19";
+const topright = "_topright_vtzde_25";
+const bottomleft = "_bottomleft_vtzde_30";
+const bottomcenter = "_bottomcenter_vtzde_36";
+const bottomright = "_bottomright_vtzde_43";
+const toast = "_toast_vtzde_49";
+const toastEnter = "_toastEnter_vtzde_1";
+const description = "_description_vtzde_79";
+const toneSuccess = "_toneSuccess_vtzde_93";
+const toneDanger = "_toneDanger_vtzde_100";
+const toneWarning = "_toneWarning_vtzde_107";
+const toneInfo = "_toneInfo_vtzde_114";
+const icon = "_icon_vtzde_121";
+const content = "_content_vtzde_136";
+const title = "_title_vtzde_143";
+const action = "_action_vtzde_162";
+const close = "_close_vtzde_163";
 const styles = {
   container,
   topleft,
@@ -28,14 +28,13 @@ const styles = {
   toast,
   toastEnter,
   description,
-  "default": "_default_11925_80",
+  toneSuccess,
+  toneDanger,
+  toneWarning,
+  toneInfo,
   icon,
-  success,
-  title,
-  error,
-  warning,
-  info,
   content,
+  title,
   action,
   close
 };
@@ -49,15 +48,15 @@ export {
   content,
   styles as default,
   description,
-  error,
   icon,
-  info,
-  success,
   title,
   toast,
   toastEnter,
+  toneDanger,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
   topcenter,
   topleft,
-  topright,
-  warning
+  topright
 };

package/dist/components/Toast/index.cjs

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const index = require("../Button/index.cjs");
+const index$1 = require("../IconButton/index.cjs");
 const Toast_module = require("./Toast.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,19 +32,19 @@ function useToast() {
   const toast = React__namespace.useCallback((options) => {
     return context.addToast(options);
   }, [context]);
-  const makeVariantHelper = React__namespace.useCallback(
-    (variant) => (titleOrOptions, description) => {
+  const makeToneHelper = React__namespace.useCallback(
+    (tone) => (titleOrOptions, description) => {
       if (typeof titleOrOptions === "string") {
-        return context.addToast({ title: titleOrOptions, description, variant });
+        return context.addToast({ title: titleOrOptions, description, tone });
       }
-      return context.addToast({ ...titleOrOptions, variant });
+      return context.addToast({ ...titleOrOptions, tone });
     },
     [context]
   );
-  const success = React__namespace.useMemo(() => makeVariantHelper("success"), [makeVariantHelper]);
-  const error = React__namespace.useMemo(() => makeVariantHelper("error"), [makeVariantHelper]);
-  const warning = React__namespace.useMemo(() => makeVariantHelper("warning"), [makeVariantHelper]);
-  const info = React__namespace.useMemo(() => makeVariantHelper("info"), [makeVariantHelper]);
+  const success = React__namespace.useMemo(() => makeToneHelper("success"), [makeToneHelper]);
+  const error = React__namespace.useMemo(() => makeToneHelper("danger"), [makeToneHelper]);
+  const warning = React__namespace.useMemo(() => makeToneHelper("warning"), [makeToneHelper]);
+  const info = React__namespace.useMemo(() => makeToneHelper("info"), [makeToneHelper]);
   return {
     toast,
     success,
@@ -86,18 +88,25 @@ function CloseIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
-const variantIcons = {
-  default: null,
+const toneIcons = {
+  neutral: null,
   success: SuccessIcon,
-  error: ErrorIcon,
+  danger: ErrorIcon,
   warning: WarningIcon,
   info: InfoIcon
 };
+const TONE_CLASS = {
+  neutral: void 0,
+  success: Toast_module.default.toneSuccess,
+  danger: Toast_module.default.toneDanger,
+  warning: Toast_module.default.toneWarning,
+  info: Toast_module.default.toneInfo
+};
 function ToastItem({
   id,
   title,
   description,
-  variant = "default",
+  tone = "neutral",
   action,
   onDismiss,
   onPause,
@@ -105,17 +114,13 @@ function ToastItem({
   className,
   ...htmlProps
 }) {
-  const Icon = variantIcons[variant];
+  const Icon = toneIcons[tone];
   const uniqueId = React__namespace.useId();
   const toastRef = React__namespace.useRef(null);
   const titleId = title ? `toast-title-${id || uniqueId}` : void 0;
   const descId = description ? `toast-desc-${id || uniqueId}` : void 0;
-  const liveRole = variant === "error" || variant === "warning" ? "alert" : "status";
-  const toastClasses = [
-    Toast_module.default.toast,
-    Toast_module.default[variant],
-    className
-  ].filter(Boolean).join(" ");
+  const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
+  const toastClasses = [Toast_module.default.toast, TONE_CLASS[tone], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -150,19 +155,12 @@ function ToastItem({
           title && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: Toast_module.default.title, children: title }),
           description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descId, className: Toast_module.default.description, children: description })
         ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: Toast_module.default.action,
-            onClick: action.onClick,
-            children: action.label
-          }
-        ),
+        action && /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "link", size: "sm", className: Toast_module.default.action, onClick: action.onClick, children: action.label }),
         onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          index$1.IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             className: Toast_module.default.close,
             onClick: onDismiss,
             "aria-label": "Dismiss notification",

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

@@ -1,11 +1,12 @@
-import * as React from 'react';
-export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+import * as React from "react";
+export type ToastTone = "neutral" | "success" | "danger" | "warning" | "info";
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToastData {
     id: string;
     title?: string;
     description?: string;
-    variant?: ToastVariant;
+    /** Colour. `neutral` is the plain notification; the semantic tones paint the shared status ramp. */
+    tone?: ToastTone;
     duration?: number;
     action?: {
         label: string;
@@ -32,14 +33,14 @@ export interface ToastProviderProps {
 }
 export declare function useToast(): {
     toast: (options: ToastInput) => string;
-    success: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    error: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    warning: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
-    info: (titleOrOptions: string | Omit<ToastInput, "variant">, description?: string) => string;
+    success: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    error: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    warning: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
+    info: (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;
 };
-declare function ToastItem({ id, title, description, variant, action, onDismiss, onPause, onResume, className, ...htmlProps }: ToastProps & {
+declare function ToastItem({ id, title, description, tone, action, onDismiss, onPause, onResume, className, ...htmlProps }: ToastProps & {
     id?: string;
     onPause?: () => void;
     onResume?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAChF,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IACvD,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC5G,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD,wBAAgB,QAAQ;qBAMoB,UAAU;8BAM/B,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;4BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;8BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;2BAA1D,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,gBAAgB,MAAM;kBAtB7D,MAAM,KAAK,IAAI;sBACd,IAAI;EA4CxB;AAkED,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,WAAW,EACX,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,2CAsEA;AA6CD,wBAAgB,aAAa,CAAC,EAC5B,QAAyB,EACzB,QAAe,EACf,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA8HpB;AAMD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAC9E,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oGAAoG;IACpG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;IACvD,sFAAsF;IACtF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC5G,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmBD,wBAAgB,QAAQ;qBAMoB,UAAU;8BAM/B,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;4BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;8BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;2BAAvD,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,gBAAgB,MAAM;kBAtB1D,MAAM,KAAK,IAAI;sBACd,IAAI;EA6CxB;AA0ED,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,WAAW,EACX,IAAgB,EAChB,MAAM,EACN,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,UAAU,GAAG;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,2CA+DA;AA6CD,wBAAgB,aAAa,CAAC,EAC5B,QAAyB,EACzB,QAAe,EACf,GAAO,EACP,QAAQ,GACT,EAAE,kBAAkB,2CA8HpB;AAMD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Toast/index.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { Button } from "../Button/index.js";
+import { IconButton } from "../IconButton/index.js";
 import styles from "./Toast.module.scss.js";
 const ToastContext = React.createContext(null);
 function useToast() {
@@ -11,19 +13,19 @@ function useToast() {
   const toast = React.useCallback((options) => {
     return context.addToast(options);
   }, [context]);
-  const makeVariantHelper = React.useCallback(
-    (variant) => (titleOrOptions, description) => {
+  const makeToneHelper = React.useCallback(
+    (tone) => (titleOrOptions, description) => {
       if (typeof titleOrOptions === "string") {
-        return context.addToast({ title: titleOrOptions, description, variant });
+        return context.addToast({ title: titleOrOptions, description, tone });
       }
-      return context.addToast({ ...titleOrOptions, variant });
+      return context.addToast({ ...titleOrOptions, tone });
     },
     [context]
   );
-  const success = React.useMemo(() => makeVariantHelper("success"), [makeVariantHelper]);
-  const error = React.useMemo(() => makeVariantHelper("error"), [makeVariantHelper]);
-  const warning = React.useMemo(() => makeVariantHelper("warning"), [makeVariantHelper]);
-  const info = React.useMemo(() => makeVariantHelper("info"), [makeVariantHelper]);
+  const success = React.useMemo(() => makeToneHelper("success"), [makeToneHelper]);
+  const error = React.useMemo(() => makeToneHelper("danger"), [makeToneHelper]);
+  const warning = React.useMemo(() => makeToneHelper("warning"), [makeToneHelper]);
+  const info = React.useMemo(() => makeToneHelper("info"), [makeToneHelper]);
   return {
     toast,
     success,
@@ -67,18 +69,25 @@ function CloseIcon() {
     /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
-const variantIcons = {
-  default: null,
+const toneIcons = {
+  neutral: null,
   success: SuccessIcon,
-  error: ErrorIcon,
+  danger: ErrorIcon,
   warning: WarningIcon,
   info: InfoIcon
 };
+const TONE_CLASS = {
+  neutral: void 0,
+  success: styles.toneSuccess,
+  danger: styles.toneDanger,
+  warning: styles.toneWarning,
+  info: styles.toneInfo
+};
 function ToastItem({
   id,
   title,
   description,
-  variant = "default",
+  tone = "neutral",
   action,
   onDismiss,
   onPause,
@@ -86,17 +95,13 @@ function ToastItem({
   className,
   ...htmlProps
 }) {
-  const Icon = variantIcons[variant];
+  const Icon = toneIcons[tone];
   const uniqueId = React.useId();
   const toastRef = React.useRef(null);
   const titleId = title ? `toast-title-${id || uniqueId}` : void 0;
   const descId = description ? `toast-desc-${id || uniqueId}` : void 0;
-  const liveRole = variant === "error" || variant === "warning" ? "alert" : "status";
-  const toastClasses = [
-    styles.toast,
-    styles[variant],
-    className
-  ].filter(Boolean).join(" ");
+  const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
+  const toastClasses = [styles.toast, TONE_CLASS[tone], className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -131,19 +136,12 @@ function ToastItem({
           title && /* @__PURE__ */ jsx("div", { id: titleId, className: styles.title, children: title }),
           description && /* @__PURE__ */ jsx("div", { id: descId, className: styles.description, children: description })
         ] }),
-        action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: styles.action,
-            onClick: action.onClick,
-            children: action.label
-          }
-        ),
+        action && /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", className: styles.action, onClick: action.onClick, children: action.label }),
         onDismiss && /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            type: "button",
+            variant: "ghost",
+            size: "sm",
             className: styles.close,
             onClick: onDismiss,
             "aria-label": "Dismiss notification",

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

@@ -1,44 +1,46 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const group = "_group_1qn18_1";
-const gapXs = "_gap-xs_1qn18_7";
-const gapSm = "_gap-sm_1qn18_11";
-const item = "_item_1qn18_15";
-const selected = "_selected_1qn18_48";
-const disabled = "_disabled_1qn18_54";
-const sizeSm = "_size-sm_1qn18_59";
-const sizeMd = "_size-md_1qn18_98";
-const sizeLg = "_size-lg_1qn18_137";
-const pills = "_pills_1qn18_207";
-const outline = "_outline_1qn18_220";
+const group = "_group_1mbp8_1";
+const gapXs = "_gap-xs_1mbp8_7";
+const gapSm = "_gap-sm_1mbp8_11";
+const item = "_item_1mbp8_15";
+const selected = "_selected_1mbp8_49";
+const disabled = "_disabled_1mbp8_55";
+const sizeSm = "_size-sm_1mbp8_60";
+const sizeMd = "_size-md_1mbp8_99";
+const sizeLg = "_size-lg_1mbp8_138";
+const soft = "_soft_1mbp8_177";
+const ghost = "_ghost_1mbp8_208";
+const outline = "_outline_1mbp8_222";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_1qn18_7",
+  "gap-xs": "_gap-xs_1mbp8_7",
   gapXs,
-  "gap-sm": "_gap-sm_1qn18_11",
+  "gap-sm": "_gap-sm_1mbp8_11",
   gapSm,
   item,
   selected,
   disabled,
-  "size-sm": "_size-sm_1qn18_59",
+  "size-sm": "_size-sm_1mbp8_60",
   sizeSm,
-  "size-md": "_size-md_1qn18_98",
+  "size-md": "_size-md_1mbp8_99",
   sizeMd,
-  "size-lg": "_size-lg_1qn18_137",
+  "size-lg": "_size-lg_1mbp8_138",
   sizeLg,
-  "default": "_default_1qn18_176",
-  pills,
+  soft,
+  ghost,
   outline
 };
 exports.default = styles;
 exports.disabled = disabled;
 exports.gapSm = gapSm;
 exports.gapXs = gapXs;
+exports.ghost = ghost;
 exports.group = group;
 exports.item = item;
 exports.outline = outline;
-exports.pills = pills;
 exports.selected = selected;
 exports.sizeLg = sizeLg;
 exports.sizeMd = sizeMd;
 exports.sizeSm = sizeSm;
+exports.soft = soft;

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

@@ -1,31 +1,32 @@
-const group = "_group_1qn18_1";
-const gapXs = "_gap-xs_1qn18_7";
-const gapSm = "_gap-sm_1qn18_11";
-const item = "_item_1qn18_15";
-const selected = "_selected_1qn18_48";
-const disabled = "_disabled_1qn18_54";
-const sizeSm = "_size-sm_1qn18_59";
-const sizeMd = "_size-md_1qn18_98";
-const sizeLg = "_size-lg_1qn18_137";
-const pills = "_pills_1qn18_207";
-const outline = "_outline_1qn18_220";
+const group = "_group_1mbp8_1";
+const gapXs = "_gap-xs_1mbp8_7";
+const gapSm = "_gap-sm_1mbp8_11";
+const item = "_item_1mbp8_15";
+const selected = "_selected_1mbp8_49";
+const disabled = "_disabled_1mbp8_55";
+const sizeSm = "_size-sm_1mbp8_60";
+const sizeMd = "_size-md_1mbp8_99";
+const sizeLg = "_size-lg_1mbp8_138";
+const soft = "_soft_1mbp8_177";
+const ghost = "_ghost_1mbp8_208";
+const outline = "_outline_1mbp8_222";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_1qn18_7",
+  "gap-xs": "_gap-xs_1mbp8_7",
   gapXs,
-  "gap-sm": "_gap-sm_1qn18_11",
+  "gap-sm": "_gap-sm_1mbp8_11",
   gapSm,
   item,
   selected,
   disabled,
-  "size-sm": "_size-sm_1qn18_59",
+  "size-sm": "_size-sm_1mbp8_60",
   sizeSm,
-  "size-md": "_size-md_1qn18_98",
+  "size-md": "_size-md_1mbp8_99",
   sizeMd,
-  "size-lg": "_size-lg_1qn18_137",
+  "size-lg": "_size-lg_1mbp8_138",
   sizeLg,
-  "default": "_default_1qn18_176",
-  pills,
+  soft,
+  ghost,
   outline
 };
 export {
@@ -33,12 +34,13 @@ export {
   disabled,
   gapSm,
   gapXs,
+  ghost,
   group,
   item,
   outline,
-  pills,
   selected,
   sizeLg,
   sizeMd,
-  sizeSm
+  sizeSm,
+  soft
 };

package/dist/components/ToggleGroup/index.cjs

@@ -36,7 +36,7 @@ function ToggleGroupRoot({
   onChange,
   onValueChange,
   children,
-  variant = "default",
+  variant = "soft",
   size: sizeProp,
   gap,
   selectionMode = "single",
@@ -45,8 +45,7 @@ function ToggleGroupRoot({
 }) {
   var _a;
   const size = index.useResolvedControlSize(sizeProp);
-  const normalizedVariant = variant === "outlined" ? "outline" : variant;
-  const resolvedGap = normalizedVariant === "pills" ? gap ?? "xs" : "none";
+  const resolvedGap = variant === "ghost" ? gap ?? "xs" : "none";
   const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? "");
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value ?? "" : internalValue;
@@ -62,7 +61,7 @@ function ToggleGroupRoot({
   );
   const classes = [
     ToggleGroup_module.default.group,
-    ToggleGroup_module.default[normalizedVariant],
+    ToggleGroup_module.default[variant],
     ToggleGroup_module.default[`size-${size}`],
     resolvedGap !== "none" && ToggleGroup_module.default[`gap-${resolvedGap}`],
     className
@@ -77,7 +76,7 @@ function ToggleGroupRoot({
   const contextValue = {
     value: currentValue,
     onChange: emitChange,
-    variant: normalizedVariant,
+    variant,
     size,
     hasFocusableSelection,
     firstEnabledValue

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

@@ -14,15 +14,16 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onValueChange?: (value: string) => void;
     /** Toggle items */
     children: React.ReactNode;
-    /** Visual variant.
-     * @default "default"
+    /** Chrome. `soft` is the filled rail, `ghost` the open pill cluster,
+     * `outline` the connected bordered segments.
+     * @default "soft"
      * @see https://usefragments.com/components/togglegroup#variants */
-    variant?: "default" | "pills" | "outline" | "outlined";
+    variant?: "soft" | "ghost" | "outline";
     /** Size.
      * @default "md" */
     size?: "sm" | "md" | "lg";
-    /** Gap between items in the pills variant. Defaults to `xs` for pills and
-     * is intentionally removed from connected variants. */
+    /** Gap between items in the ghost variant. Defaults to `xs` for ghost and
+     * is intentionally removed from the connected variants. */
     gap?: "none" | "xs" | "sm";
     /** Selection mode for this control. Currently only single-select is supported.
      * @default "single" */
@@ -39,7 +40,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButt
 interface ToggleGroupContextValue {
     value: string;
     onChange: (value: string) => void;
-    variant: "default" | "pills" | "outline";
+    variant: "soft" | "ghost" | "outline";
     size: "sm" | "md" | "lg";
     hasFocusableSelection: boolean;
     firstEnabledValue: string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;uEAEmE;IACnE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IACvD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;2DACuD;IACvD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAID,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,GAAG,EACH,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAuDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAwFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;uEAGmE;IACnE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACvC;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;+DAC2D;IAC3D,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACtC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAID,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAgB,EAChB,IAAI,EAAE,QAAQ,EACd,GAAG,EACH,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAsDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAwFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}