@usefragments/ui 1.6.0 → 2.0.0

package/dist/colorpicker.js

@@ -7,6 +7,7 @@ import { Field } from "@base-ui/react/field";
 import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
 import { Input } from "./components/Input/index.js";
 import styles from "./components/ColorPicker/ColorPicker.module.scss.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 let _HexColorPicker = null;
 let _colorfulLoadPromise = null;
 let _colorfulFailed = false;
@@ -18,7 +19,7 @@ function loadColorfulDeps() {
         _HexColorPicker = rc.HexColorPicker;
       } catch {
         _colorfulFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] ColorPicker: react-colorful is not installed. Install it with: npm install react-colorful"
           );
@@ -109,6 +110,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
                 className: styles.swatch,
                 style: { backgroundColor: displayValue },
                 disabled,
+                "aria-invalid": error || void 0,
                 "aria-label": label ? `Edit ${label} color` : "Edit color"
               }
             ),
@@ -137,6 +139,7 @@ const ColorPickerRoot = React.forwardRef(function ColorPicker2({
               onChange: handleInputChange,
               onBlur: handleInputBlur,
               disabled,
+              error,
               size,
               className: styles.hexInput,
               inputClassName: styles.hexInputField,

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const accordion = "_accordion_17aim_1";
-const item = "_item_17aim_11";
-const heading = "_heading_17aim_16";
-const trigger = "_trigger_17aim_21";
-const triggerContent = "_triggerContent_17aim_72";
-const chevron = "_chevron_17aim_77";
-const content = "_content_17aim_88";
-const contentInner = "_contentInner_17aim_100";
+const accordion = "_accordion_5sec0_1";
+const item = "_item_5sec0_11";
+const heading = "_heading_5sec0_17";
+const trigger = "_trigger_5sec0_22";
+const triggerContent = "_triggerContent_5sec0_76";
+const chevron = "_chevron_5sec0_81";
+const content = "_content_5sec0_92";
+const contentInner = "_contentInner_5sec0_104";
 const styles = {
   accordion,
   item,

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

@@ -1,11 +1,11 @@
-const accordion = "_accordion_17aim_1";
-const item = "_item_17aim_11";
-const heading = "_heading_17aim_16";
-const trigger = "_trigger_17aim_21";
-const triggerContent = "_triggerContent_17aim_72";
-const chevron = "_chevron_17aim_77";
-const content = "_content_17aim_88";
-const contentInner = "_contentInner_17aim_100";
+const accordion = "_accordion_5sec0_1";
+const item = "_item_5sec0_11";
+const heading = "_heading_5sec0_17";
+const trigger = "_trigger_5sec0_22";
+const triggerContent = "_triggerContent_5sec0_76";
+const chevron = "_chevron_5sec0_81";
+const content = "_content_5sec0_92";
+const contentInner = "_contentInner_5sec0_104";
 const styles = {
   accordion,
   item,

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

@@ -1,24 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const alert = "_alert_1n287_1";
-const title = "_title_1n287_14";
-const info = "_info_1n287_18";
-const success = "_success_1n287_24";
-const warning = "_warning_1n287_30";
-const error = "_error_1n287_36";
-const icon = "_icon_1n287_42";
-const body = "_body_1n287_74";
-const content = "_content_1n287_89";
-const actions = "_actions_1n287_98";
-const close = "_close_1n287_104";
-const action = "_action_1n287_98";
+const alert = "_alert_1b772_1";
+const title = "_title_1b772_29";
+const toneInfo = "_toneInfo_1b772_33";
+const toneSuccess = "_toneSuccess_1b772_39";
+const toneWarning = "_toneWarning_1b772_45";
+const toneDanger = "_toneDanger_1b772_51";
+const surface = "_surface_1b772_57";
+const icon = "_icon_1b772_65";
+const body = "_body_1b772_82";
+const content = "_content_1b772_97";
+const actions = "_actions_1b772_106";
+const close = "_close_1b772_112";
+const action = "_action_1b772_106";
 const styles = {
   alert,
   title,
-  info,
-  success,
-  warning,
-  error,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  surface,
   icon,
   body,
   content,
@@ -33,9 +35,10 @@ exports.body = body;
 exports.close = close;
 exports.content = content;
 exports.default = styles;
-exports.error = error;
 exports.icon = icon;
-exports.info = info;
-exports.success = success;
+exports.surface = surface;
 exports.title = title;
-exports.warning = warning;
+exports.toneDanger = toneDanger;
+exports.toneInfo = toneInfo;
+exports.toneSuccess = toneSuccess;
+exports.toneWarning = toneWarning;

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

@@ -1,22 +1,24 @@
-const alert = "_alert_1n287_1";
-const title = "_title_1n287_14";
-const info = "_info_1n287_18";
-const success = "_success_1n287_24";
-const warning = "_warning_1n287_30";
-const error = "_error_1n287_36";
-const icon = "_icon_1n287_42";
-const body = "_body_1n287_74";
-const content = "_content_1n287_89";
-const actions = "_actions_1n287_98";
-const close = "_close_1n287_104";
-const action = "_action_1n287_98";
+const alert = "_alert_1b772_1";
+const title = "_title_1b772_29";
+const toneInfo = "_toneInfo_1b772_33";
+const toneSuccess = "_toneSuccess_1b772_39";
+const toneWarning = "_toneWarning_1b772_45";
+const toneDanger = "_toneDanger_1b772_51";
+const surface = "_surface_1b772_57";
+const icon = "_icon_1b772_65";
+const body = "_body_1b772_82";
+const content = "_content_1b772_97";
+const actions = "_actions_1b772_106";
+const close = "_close_1b772_112";
+const action = "_action_1b772_106";
 const styles = {
   alert,
   title,
-  info,
-  success,
-  warning,
-  error,
+  toneInfo,
+  toneSuccess,
+  toneWarning,
+  toneDanger,
+  surface,
   icon,
   body,
   content,
@@ -32,10 +34,11 @@ export {
   close,
   content,
   styles as default,
-  error,
   icon,
-  info,
-  success,
+  surface,
   title,
-  warning
+  toneDanger,
+  toneInfo,
+  toneSuccess,
+  toneWarning
 };

package/dist/components/Alert/index.cjs

@@ -37,15 +37,22 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler == null ? void 0 : internalHandler(event);
   };
 }
-const severityIcons = {
+const toneIcons = {
   info: "i",
   success: "✓",
   warning: "!",
-  error: "✗"
+  danger: "✗"
+};
+const TONE_CLASS = {
+  info: Alert_module.default.toneInfo,
+  success: Alert_module.default.toneSuccess,
+  warning: Alert_module.default.toneWarning,
+  danger: Alert_module.default.toneDanger
 };
 function AlertRoot({
   children,
-  severity = "info",
+  tone = "info",
+  emphasis = "tint",
   className,
   ...htmlProps
 }) {
@@ -56,10 +63,15 @@ function AlertRoot({
     setDismissed(true);
   }, []);
   if (dismissed) return null;
-  const classes = [Alert_module.default.alert, Alert_module.default[severity], className].filter(Boolean).join(" ");
-  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const classes = [
+    Alert_module.default.alert,
+    TONE_CLASS[tone],
+    emphasis === "surface" ? Alert_module.default.surface : null,
+    className
+  ].filter(Boolean).join(" ");
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
   const contextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss
@@ -77,9 +89,9 @@ function AlertRoot({
   ) });
 }
 function AlertIcon({ children, className, ...htmlProps }) {
-  const { severity } = useAlertContext();
+  const { tone } = useAlertContext();
   const classes = [Alert_module.default.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? toneIcons[tone] });
 }
 function AlertBody({ children, className, ...htmlProps }) {
   const classes = [Alert_module.default.body, className].filter(Boolean).join(" ");

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

@@ -1,15 +1,21 @@
-import * as React from 'react';
-export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
+import * as React from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
 /**
- * Alert for contextual feedback messages (info, success, warning, error).
+ * Alert for contextual feedback messages (info, success, warning, danger).
  * @see https://usefragments.com/components/alert
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    /** Alert severity level. Controls color and default icon.
+    /** Tone. Controls color and default icon.
      * @default "info"
-     * @see https://usefragments.com/components/alert#variants */
-    severity?: AlertSeverity;
+     * @see https://usefragments.com/components/alert#tones */
+    tone?: AlertTone;
+    /** How much surface the tone claims. `tint` washes the whole card in the
+     * tone colour. `surface` keeps the card on the page's own background and
+     * spends the colour only on the hairline and the title — for a standing
+     * failure that owns the view, where a full wash would read as a red page.
+     * @default "tint" */
+    emphasis?: "tint" | "surface";
 }
 export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     children?: React.ReactNode;
@@ -23,31 +29,31 @@ export interface AlertContentProps extends React.HTMLAttributes<HTMLDivElement>
 export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
-export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     children?: React.ReactNode;
 }
 export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
 interface AlertContextValue {
-    severity: AlertSeverity;
+    tone: AlertTone;
     titleId: string;
     descId: string;
     dismiss: () => void;
 }
 declare function useAlertContext(): AlertContextValue;
-declare function AlertRoot({ children, severity, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertRoot({ children, tone, emphasis, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 declare function AlertIcon({ children, className, ...htmlProps }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertBody({ children, className, ...htmlProps }: AlertBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertContent({ children, className, ...htmlProps }: AlertContentProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertActions({ children, className, ...htmlProps }: AlertActionsProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertAction({ children, onClick, type, className, ...htmlProps }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
-declare function AlertClose({ children, className, onClick, type, 'aria-label': ariaLabel, ...htmlProps }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertClose({ children, className, onClick, type, "aria-label": ariaLabel, ...htmlProps }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
 export declare const Alert: typeof AlertRoot & {
     Icon: typeof AlertIcon;
     Body: typeof AlertBody;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Alert/index.js

@@ -18,15 +18,22 @@ function composeEventHandlers(userHandler, internalHandler) {
     internalHandler == null ? void 0 : internalHandler(event);
   };
 }
-const severityIcons = {
+const toneIcons = {
   info: "i",
   success: "✓",
   warning: "!",
-  error: "✗"
+  danger: "✗"
+};
+const TONE_CLASS = {
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger
 };
 function AlertRoot({
   children,
-  severity = "info",
+  tone = "info",
+  emphasis = "tint",
   className,
   ...htmlProps
 }) {
@@ -37,10 +44,15 @@ function AlertRoot({
     setDismissed(true);
   }, []);
   if (dismissed) return null;
-  const classes = [styles.alert, styles[severity], className].filter(Boolean).join(" ");
-  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const classes = [
+    styles.alert,
+    TONE_CLASS[tone],
+    emphasis === "surface" ? styles.surface : null,
+    className
+  ].filter(Boolean).join(" ");
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
   const contextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss
@@ -58,9 +70,9 @@ function AlertRoot({
   ) });
 }
 function AlertIcon({ children, className, ...htmlProps }) {
-  const { severity } = useAlertContext();
+  const { tone } = useAlertContext();
   const classes = [styles.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+  return /* @__PURE__ */ jsx("span", { ...htmlProps, className: classes, "aria-hidden": "true", children: children ?? toneIcons[tone] });
 }
 function AlertBody({ children, className, ...htmlProps }) {
   const classes = [styles.body, className].filter(Boolean).join(" ");

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1aaa9_1";
-const sidebarLayout = "_sidebarLayout_1aaa9_35";
-const header = "_header_1aaa9_45";
-const sidebar = "_sidebar_1aaa9_35";
-const sidebarFullHeight = "_sidebarFullHeight_1aaa9_95";
-const sidebarFloating = "_sidebarFloating_1aaa9_105";
-const main = "_main_1aaa9_109";
-const mainFloating = "_mainFloating_1aaa9_116";
-const paddingNone = "_paddingNone_1aaa9_138";
-const paddingSm = "_paddingSm_1aaa9_142";
-const paddingMd = "_paddingMd_1aaa9_146";
-const paddingLg = "_paddingLg_1aaa9_150";
-const aside = "_aside_1aaa9_154";
-const asideFloating = "_asideFloating_1aaa9_175";
+const root = "_root_1syrl_1";
+const sidebarLayout = "_sidebarLayout_1syrl_41";
+const header = "_header_1syrl_57";
+const sidebar = "_sidebar_1syrl_41";
+const sidebarFullHeight = "_sidebarFullHeight_1syrl_110";
+const sidebarFloating = "_sidebarFloating_1syrl_119";
+const main = "_main_1syrl_123";
+const mainFloating = "_mainFloating_1syrl_130";
+const paddingNone = "_paddingNone_1syrl_152";
+const paddingSm = "_paddingSm_1syrl_156";
+const paddingMd = "_paddingMd_1syrl_160";
+const paddingLg = "_paddingLg_1syrl_164";
+const aside = "_aside_1syrl_168";
+const asideFloating = "_asideFloating_1syrl_189";
 const styles = {
   root,
   sidebarLayout,

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

@@ -1,17 +1,17 @@
-const root = "_root_1aaa9_1";
-const sidebarLayout = "_sidebarLayout_1aaa9_35";
-const header = "_header_1aaa9_45";
-const sidebar = "_sidebar_1aaa9_35";
-const sidebarFullHeight = "_sidebarFullHeight_1aaa9_95";
-const sidebarFloating = "_sidebarFloating_1aaa9_105";
-const main = "_main_1aaa9_109";
-const mainFloating = "_mainFloating_1aaa9_116";
-const paddingNone = "_paddingNone_1aaa9_138";
-const paddingSm = "_paddingSm_1aaa9_142";
-const paddingMd = "_paddingMd_1aaa9_146";
-const paddingLg = "_paddingLg_1aaa9_150";
-const aside = "_aside_1aaa9_154";
-const asideFloating = "_asideFloating_1aaa9_175";
+const root = "_root_1syrl_1";
+const sidebarLayout = "_sidebarLayout_1syrl_41";
+const header = "_header_1syrl_57";
+const sidebar = "_sidebar_1syrl_41";
+const sidebarFullHeight = "_sidebarFullHeight_1syrl_110";
+const sidebarFloating = "_sidebarFloating_1syrl_119";
+const main = "_main_1syrl_123";
+const mainFloating = "_mainFloating_1syrl_130";
+const paddingNone = "_paddingNone_1syrl_152";
+const paddingSm = "_paddingSm_1syrl_156";
+const paddingMd = "_paddingMd_1syrl_160";
+const paddingLg = "_paddingLg_1syrl_164";
+const aside = "_aside_1syrl_168";
+const asideFloating = "_asideFloating_1syrl_189";
 const styles = {
   root,
   sidebarLayout,

package/dist/components/AppShell/index.cjs

@@ -37,7 +37,7 @@ function resolveSlotVariant(explicit, layout, slot) {
 const AppShellContext = React__namespace.createContext({
   layout: "default",
   structure: "default",
-  headerHeight: "56px",
+  headerHeight: "var(--fui-appshell-header-height, 56px)",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
@@ -60,7 +60,7 @@ function useIsMobile() {
 }
 function extractConfigFromChildren(children) {
   const config = {
-    headerHeight: "56px",
+    headerHeight: "var(--fui-appshell-header-height, 56px)",
     sidebarWidth: "240px",
     sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",

package/dist/components/AppShell/index.js

@@ -18,7 +18,7 @@ function resolveSlotVariant(explicit, layout, slot) {
 const AppShellContext = React.createContext({
   layout: "default",
   structure: "default",
-  headerHeight: "56px",
+  headerHeight: "var(--fui-appshell-header-height, 56px)",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
@@ -41,7 +41,7 @@ function useIsMobile() {
 }
 function extractConfigFromChildren(children) {
   const config = {
-    headerHeight: "56px",
+    headerHeight: "var(--fui-appshell-header-height, 56px)",
     sidebarWidth: "240px",
     sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_1m7oq_1";
-const xs = "_xs_1m7oq_14";
-const sm = "_sm_1m7oq_26";
-const md = "_md_1m7oq_38";
-const lg = "_lg_1m7oq_50";
-const xl = "_xl_1m7oq_62";
-const square = "_square_1m7oq_74";
-const image = "_image_1m7oq_78";
-const initials = "_initials_1m7oq_84";
-const fallback = "_fallback_1m7oq_91";
-const fallbackIcon = "_fallbackIcon_1m7oq_99";
-const group = "_group_1m7oq_105";
-const groupItem = "_groupItem_1m7oq_111";
-const overflow = "_overflow_1m7oq_140";
+const avatar = "_avatar_1ps8e_1";
+const xs = "_xs_1ps8e_14";
+const sm = "_sm_1ps8e_26";
+const md = "_md_1ps8e_38";
+const lg = "_lg_1ps8e_50";
+const xl = "_xl_1ps8e_62";
+const square = "_square_1ps8e_75";
+const image = "_image_1ps8e_79";
+const initials = "_initials_1ps8e_85";
+const fallback = "_fallback_1ps8e_91";
+const fallbackIcon = "_fallbackIcon_1ps8e_99";
+const group = "_group_1ps8e_105";
+const groupItem = "_groupItem_1ps8e_111";
+const overflow = "_overflow_1ps8e_140";
 const styles = {
   avatar,
   xs,

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

@@ -1,17 +1,17 @@
-const avatar = "_avatar_1m7oq_1";
-const xs = "_xs_1m7oq_14";
-const sm = "_sm_1m7oq_26";
-const md = "_md_1m7oq_38";
-const lg = "_lg_1m7oq_50";
-const xl = "_xl_1m7oq_62";
-const square = "_square_1m7oq_74";
-const image = "_image_1m7oq_78";
-const initials = "_initials_1m7oq_84";
-const fallback = "_fallback_1m7oq_91";
-const fallbackIcon = "_fallbackIcon_1m7oq_99";
-const group = "_group_1m7oq_105";
-const groupItem = "_groupItem_1m7oq_111";
-const overflow = "_overflow_1m7oq_140";
+const avatar = "_avatar_1ps8e_1";
+const xs = "_xs_1ps8e_14";
+const sm = "_sm_1ps8e_26";
+const md = "_md_1ps8e_38";
+const lg = "_lg_1ps8e_50";
+const xl = "_xl_1ps8e_62";
+const square = "_square_1ps8e_75";
+const image = "_image_1ps8e_79";
+const initials = "_initials_1ps8e_85";
+const fallback = "_fallback_1ps8e_91";
+const fallbackIcon = "_fallbackIcon_1ps8e_99";
+const group = "_group_1ps8e_105";
+const groupItem = "_groupItem_1ps8e_111";
+const overflow = "_overflow_1ps8e_140";
 const styles = {
   avatar,
   xs,