@ttoss/fsl-ui 0.2.4

package/dist/components/Toast/Toast.cjs

@@ -0,0 +1,218 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_focusRing = require('../../tokens/focusRing.cjs');
+const require_resolveInteractiveStyle = require('../../tokens/resolveInteractiveStyle.cjs');
+const require_Icon = require('../Icon/Icon.cjs');
+let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
+let react_aria_components = require("react-aria-components");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Toast/Toast.tsx
+/** Formal semantic identity — Toast root (Feedback entity). */
+var toastMeta = {
+  displayName: "Toast",
+  entity: "Feedback",
+  structure: "root"
+};
+var TOAST_MIN_WIDTH = "240px";
+var TOAST_REGION_MAX_WIDTH = "min(420px, calc(100vw - 2rem))";
+/** Root surface style — raised feedback card chrome. */
+var buildToastRootStyle = c => {
+  return {
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: _ttoss_fsl_theme_vars.vars.spacing.gap.inline.md,
+    minWidth: TOAST_MIN_WIDTH,
+    padding: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.surface,
+    borderWidth: _ttoss_fsl_theme_vars.vars.border.outline.surface.width,
+    borderStyle: _ttoss_fsl_theme_vars.vars.border.outline.surface.style,
+    borderColor: c?.border?.default,
+    backgroundColor: c?.background?.default,
+    color: c?.text?.default,
+    boxShadow: _ttoss_fsl_theme_vars.vars.elevation.surface.raised,
+    outline: "none"
+  };
+};
+/** Close-button (closeTrigger) style — icon button, transparent by default. */
+var buildCloseTriggerStyle = ({
+  c,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isFocusVisible
+}) => {
+  const flags = {
+    isHovered,
+    isPressed,
+    isDisabled,
+    isFocusVisible
+  };
+  const text = c?.text;
+  return {
+    boxSizing: "border-box",
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: _ttoss_fsl_theme_vars.vars.sizing.icon.lg,
+    height: _ttoss_fsl_theme_vars.vars.sizing.icon.lg,
+    padding: 0,
+    border: "none",
+    borderRadius: _ttoss_fsl_theme_vars.vars.radii.control,
+    background: require_resolveInteractiveStyle.resolveInteractiveStyle(c?.background, flags) ?? "transparent",
+    color: require_resolveInteractiveStyle.resolveInteractiveStyle(text, flags) ?? text?.default,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? _ttoss_fsl_theme_vars.vars.opacity.disabled : void 0,
+    outline: require_focusRing.focusRingOutline(isFocusVisible),
+    outlineOffset: "2px"
+  };
+};
+/** Formal semantic identity — ToastRegion (Feedback entity, root host). */
+var toastRegionMeta = {
+  displayName: "ToastRegion",
+  entity: "Feedback",
+  structure: "root"
+};
+/**
+* Factory for a typed toast queue. Call once (typically at module scope of
+* your app) and pass the result to `<ToastRegion queue={queue} />`.
+*
+* @example
+* ```tsx
+* import { createToastQueue } from '@ttoss/fsl-ui';
+*
+* export const toastQueue = createToastQueue();
+*
+* // Somewhere in your app:
+* toastQueue.add(
+*   { title: 'Saved', description: 'Your changes are live.', evaluation: 'positive' },
+*   { timeout: 5000 }
+* );
+* ```
+*/
+var createToastQueue = options => {
+  return new react_aria_components.UNSTABLE_ToastQueue(options);
+};
+/**
+* A single Feedback toast surface. Renders `title`, `description`, and a
+* dismiss button.
+*
+* This component is rendered by `ToastRegion` for each queued item — you
+* rarely instantiate it directly. Use `createToastQueue` + `queue.add(...)`
+* in application code, and place a single `<ToastRegion />` at the root.
+*/
+var Toast = ({
+  toast
+}) => {
+  const evaluation = toast.content.evaluation ?? "primary";
+  const c = _ttoss_fsl_theme_vars.vars.colors.feedback[evaluation];
+  const textColor = c?.text?.default;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.UNSTABLE_Toast, {
+    toast,
+    "data-scope": "toast",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: buildToastRootStyle(c),
+    children: [/* @__PURE__ */(0, react_jsx_runtime.jsxs)(react_aria_components.UNSTABLE_ToastContent, {
+      "data-scope": "toast",
+      "data-part": "content",
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.xs,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+        slot: "title",
+        "data-scope": "toast",
+        "data-part": "title",
+        style: {
+          ..._ttoss_fsl_theme_vars.vars.text.label.md,
+          color: textColor
+        },
+        children: toast.content.title
+      }), toast.content.description !== void 0 && /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+        slot: "description",
+        "data-scope": "toast",
+        "data-part": "body",
+        style: {
+          ..._ttoss_fsl_theme_vars.vars.text.body.md,
+          color: textColor
+        },
+        children: toast.content.description
+      })]
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+      slot: "close",
+      "data-scope": "toast",
+      "data-part": "closeTrigger",
+      style: ({
+        isHovered,
+        isPressed,
+        isDisabled,
+        isFocusVisible
+      }) => {
+        return buildCloseTriggerStyle({
+          c,
+          isHovered,
+          isPressed,
+          isDisabled,
+          isFocusVisible
+        });
+      },
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+        intent: "action.close",
+        size: "sm"
+      })
+    })]
+  });
+};
+Toast.displayName = toastMeta.displayName;
+/**
+* The Toast host — place once near the root of your app and pass the queue
+* created with `createToastQueue`. Renders each queued toast as a
+* `Toast` surface.
+*
+* Uses `vars.elevation.raised` — the first component in the system that
+* lifts off the page plane without being a full overlay.
+*
+* @example
+* ```tsx
+* <ToastRegion queue={toastQueue} />
+* ```
+*/
+var ToastRegion = props => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_aria_components.UNSTABLE_ToastRegion, {
+    ...props,
+    "data-scope": "toast-region",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      position: "fixed",
+      insetBlockEnd: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+      insetInlineEnd: _ttoss_fsl_theme_vars.vars.spacing.inset.surface.md,
+      display: "flex",
+      flexDirection: "column",
+      gap: _ttoss_fsl_theme_vars.vars.spacing.gap.stack.sm,
+      zIndex: _ttoss_fsl_theme_vars.vars.zIndex.layer.transient,
+      maxWidth: TOAST_REGION_MAX_WIDTH,
+      outline: "none"
+    },
+    children: ({
+      toast
+    }) => {
+      return /* @__PURE__ */(0, react_jsx_runtime.jsx)(Toast, {
+        toast
+      });
+    }
+  });
+};
+ToastRegion.displayName = toastRegionMeta.displayName;
+
+//#endregion
+exports.Toast = Toast;
+exports.ToastRegion = ToastRegion;
+exports.createToastQueue = createToastQueue;
+exports.toastMeta = toastMeta;
+exports.toastRegionMeta = toastRegionMeta;

package/dist/components/Toast/Toast.d.cts

@@ -0,0 +1,96 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.cjs";
+import * as React from "react";
+import { QueuedToast, ToastRegionProps, UNSTABLE_ToastQueue } from "react-aria-components";
+
+//#region src/components/Toast/Toast.d.ts
+/** Formal semantic identity — Toast root (Feedback entity). */
+declare const toastMeta: {
+  readonly displayName: "Toast";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/** Formal semantic identity — ToastRegion (Feedback entity, root host). */
+declare const toastRegionMeta: {
+  readonly displayName: "ToastRegion";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/** The payload each toast carries on the queue. */
+interface ToastContent {
+  /** Short heading for the toast. */
+  title: React.ReactNode;
+  /** Optional longer description. */
+  description?: React.ReactNode;
+  /**
+   * Authorial valence. Feedback toasts encode meaning through color.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+}
+/**
+ * Factory for a typed toast queue. Call once (typically at module scope of
+ * your app) and pass the result to `<ToastRegion queue={queue} />`.
+ *
+ * @example
+ * ```tsx
+ * import { createToastQueue } from '@ttoss/fsl-ui';
+ *
+ * export const toastQueue = createToastQueue();
+ *
+ * // Somewhere in your app:
+ * toastQueue.add(
+ *   { title: 'Saved', description: 'Your changes are live.', evaluation: 'positive' },
+ *   { timeout: 5000 }
+ * );
+ * ```
+ */
+declare const createToastQueue: (options?: {
+  maxVisibleToasts?: number;
+}) => UNSTABLE_ToastQueue<ToastContent>;
+/** Re-exported type of the queue produced by `createToastQueue`. */
+type ToastQueue = UNSTABLE_ToastQueue<ToastContent>;
+/**
+ * Props for the Toast component.
+ */
+interface ToastProps {
+  /** The queued toast supplied by the `ToastRegion` render callback. */
+  toast: QueuedToast<ToastContent>;
+}
+/**
+ * A single Feedback toast surface. Renders `title`, `description`, and a
+ * dismiss button.
+ *
+ * This component is rendered by `ToastRegion` for each queued item — you
+ * rarely instantiate it directly. Use `createToastQueue` + `queue.add(...)`
+ * in application code, and place a single `<ToastRegion />` at the root.
+ */
+declare const Toast: {
+  ({
+    toast
+  }: ToastProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Toast";
+};
+/**
+ * Props for the ToastRegion component.
+ */
+type ToastRegionProps$1 = Omit<ToastRegionProps<ToastContent>, 'children' | 'style' | 'className'>;
+/**
+ * The Toast host — place once near the root of your app and pass the queue
+ * created with `createToastQueue`. Renders each queued toast as a
+ * `Toast` surface.
+ *
+ * Uses `vars.elevation.raised` — the first component in the system that
+ * lifts off the page plane without being a full overlay.
+ *
+ * @example
+ * ```tsx
+ * <ToastRegion queue={toastQueue} />
+ * ```
+ */
+declare const ToastRegion: {
+  (props: ToastRegionProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToastRegion";
+};
+//#endregion
+export { Toast, ToastContent, ToastProps, ToastQueue, ToastRegion, ToastRegionProps$1 as ToastRegionProps, createToastQueue, toastMeta, toastRegionMeta };

package/dist/components/Toast/Toast.d.mts

@@ -0,0 +1,96 @@
+
+import { EvaluationsFor } from "../../semantics/taxonomy.mjs";
+import { QueuedToast, ToastRegionProps, UNSTABLE_ToastQueue } from "react-aria-components";
+import * as React from "react";
+
+//#region src/components/Toast/Toast.d.ts
+/** Formal semantic identity — Toast root (Feedback entity). */
+declare const toastMeta: {
+  readonly displayName: "Toast";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/** Formal semantic identity — ToastRegion (Feedback entity, root host). */
+declare const toastRegionMeta: {
+  readonly displayName: "ToastRegion";
+  readonly entity: "Feedback";
+  readonly structure: "root";
+};
+/** The payload each toast carries on the queue. */
+interface ToastContent {
+  /** Short heading for the toast. */
+  title: React.ReactNode;
+  /** Optional longer description. */
+  description?: React.ReactNode;
+  /**
+   * Authorial valence. Feedback toasts encode meaning through color.
+   * @default 'primary'
+   */
+  evaluation?: EvaluationsFor<'Feedback'>;
+}
+/**
+ * Factory for a typed toast queue. Call once (typically at module scope of
+ * your app) and pass the result to `<ToastRegion queue={queue} />`.
+ *
+ * @example
+ * ```tsx
+ * import { createToastQueue } from '@ttoss/fsl-ui';
+ *
+ * export const toastQueue = createToastQueue();
+ *
+ * // Somewhere in your app:
+ * toastQueue.add(
+ *   { title: 'Saved', description: 'Your changes are live.', evaluation: 'positive' },
+ *   { timeout: 5000 }
+ * );
+ * ```
+ */
+declare const createToastQueue: (options?: {
+  maxVisibleToasts?: number;
+}) => UNSTABLE_ToastQueue<ToastContent>;
+/** Re-exported type of the queue produced by `createToastQueue`. */
+type ToastQueue = UNSTABLE_ToastQueue<ToastContent>;
+/**
+ * Props for the Toast component.
+ */
+interface ToastProps {
+  /** The queued toast supplied by the `ToastRegion` render callback. */
+  toast: QueuedToast<ToastContent>;
+}
+/**
+ * A single Feedback toast surface. Renders `title`, `description`, and a
+ * dismiss button.
+ *
+ * This component is rendered by `ToastRegion` for each queued item — you
+ * rarely instantiate it directly. Use `createToastQueue` + `queue.add(...)`
+ * in application code, and place a single `<ToastRegion />` at the root.
+ */
+declare const Toast: {
+  ({
+    toast
+  }: ToastProps): import("react/jsx-runtime").JSX.Element;
+  displayName: "Toast";
+};
+/**
+ * Props for the ToastRegion component.
+ */
+type ToastRegionProps$1 = Omit<ToastRegionProps<ToastContent>, 'children' | 'style' | 'className'>;
+/**
+ * The Toast host — place once near the root of your app and pass the queue
+ * created with `createToastQueue`. Renders each queued toast as a
+ * `Toast` surface.
+ *
+ * Uses `vars.elevation.raised` — the first component in the system that
+ * lifts off the page plane without being a full overlay.
+ *
+ * @example
+ * ```tsx
+ * <ToastRegion queue={toastQueue} />
+ * ```
+ */
+declare const ToastRegion: {
+  (props: ToastRegionProps$1): import("react/jsx-runtime").JSX.Element;
+  displayName: "ToastRegion";
+};
+//#endregion
+export { Toast, ToastContent, ToastProps, ToastQueue, ToastRegion, ToastRegionProps$1 as ToastRegionProps, createToastQueue, toastMeta, toastRegionMeta };

package/dist/components/Toast/Toast.mjs

@@ -0,0 +1,214 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { focusRingOutline } from "../../tokens/focusRing.mjs";
+import { resolveInteractiveStyle } from "../../tokens/resolveInteractiveStyle.mjs";
+import { Icon } from "../Icon/Icon.mjs";
+import { vars } from "@ttoss/fsl-theme/vars";
+import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Toast/Toast.tsx
+/** Formal semantic identity — Toast root (Feedback entity). */
+var toastMeta = {
+  displayName: "Toast",
+  entity: "Feedback",
+  structure: "root"
+};
+var TOAST_MIN_WIDTH = "240px";
+var TOAST_REGION_MAX_WIDTH = "min(420px, calc(100vw - 2rem))";
+/** Root surface style — raised feedback card chrome. */
+var buildToastRootStyle = c => {
+  return {
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: vars.spacing.gap.inline.md,
+    minWidth: TOAST_MIN_WIDTH,
+    padding: vars.spacing.inset.surface.md,
+    borderRadius: vars.radii.surface,
+    borderWidth: vars.border.outline.surface.width,
+    borderStyle: vars.border.outline.surface.style,
+    borderColor: c?.border?.default,
+    backgroundColor: c?.background?.default,
+    color: c?.text?.default,
+    boxShadow: vars.elevation.surface.raised,
+    outline: "none"
+  };
+};
+/** Close-button (closeTrigger) style — icon button, transparent by default. */
+var buildCloseTriggerStyle = ({
+  c,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isFocusVisible
+}) => {
+  const flags = {
+    isHovered,
+    isPressed,
+    isDisabled,
+    isFocusVisible
+  };
+  const text = c?.text;
+  return {
+    boxSizing: "border-box",
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: vars.sizing.icon.lg,
+    height: vars.sizing.icon.lg,
+    padding: 0,
+    border: "none",
+    borderRadius: vars.radii.control,
+    background: resolveInteractiveStyle(c?.background, flags) ?? "transparent",
+    color: resolveInteractiveStyle(text, flags) ?? text?.default,
+    cursor: isDisabled ? "not-allowed" : "pointer",
+    opacity: isDisabled ? vars.opacity.disabled : void 0,
+    outline: focusRingOutline(isFocusVisible),
+    outlineOffset: "2px"
+  };
+};
+/** Formal semantic identity — ToastRegion (Feedback entity, root host). */
+var toastRegionMeta = {
+  displayName: "ToastRegion",
+  entity: "Feedback",
+  structure: "root"
+};
+/**
+* Factory for a typed toast queue. Call once (typically at module scope of
+* your app) and pass the result to `<ToastRegion queue={queue} />`.
+*
+* @example
+* ```tsx
+* import { createToastQueue } from '@ttoss/fsl-ui';
+*
+* export const toastQueue = createToastQueue();
+*
+* // Somewhere in your app:
+* toastQueue.add(
+*   { title: 'Saved', description: 'Your changes are live.', evaluation: 'positive' },
+*   { timeout: 5000 }
+* );
+* ```
+*/
+var createToastQueue = options => {
+  return new UNSTABLE_ToastQueue(options);
+};
+/**
+* A single Feedback toast surface. Renders `title`, `description`, and a
+* dismiss button.
+*
+* This component is rendered by `ToastRegion` for each queued item — you
+* rarely instantiate it directly. Use `createToastQueue` + `queue.add(...)`
+* in application code, and place a single `<ToastRegion />` at the root.
+*/
+var Toast = ({
+  toast
+}) => {
+  const evaluation = toast.content.evaluation ?? "primary";
+  const c = vars.colors.feedback[evaluation];
+  const textColor = c?.text?.default;
+  return /* @__PURE__ */jsxs(UNSTABLE_Toast, {
+    toast,
+    "data-scope": "toast",
+    "data-part": "root",
+    "data-evaluation": evaluation,
+    style: buildToastRootStyle(c),
+    children: [/* @__PURE__ */jsxs(UNSTABLE_ToastContent, {
+      "data-scope": "toast",
+      "data-part": "content",
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: vars.spacing.gap.stack.xs,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        slot: "title",
+        "data-scope": "toast",
+        "data-part": "title",
+        style: {
+          ...vars.text.label.md,
+          color: textColor
+        },
+        children: toast.content.title
+      }), toast.content.description !== void 0 && /* @__PURE__ */jsx(Text, {
+        slot: "description",
+        "data-scope": "toast",
+        "data-part": "body",
+        style: {
+          ...vars.text.body.md,
+          color: textColor
+        },
+        children: toast.content.description
+      })]
+    }), /* @__PURE__ */jsx(Button, {
+      slot: "close",
+      "data-scope": "toast",
+      "data-part": "closeTrigger",
+      style: ({
+        isHovered,
+        isPressed,
+        isDisabled,
+        isFocusVisible
+      }) => {
+        return buildCloseTriggerStyle({
+          c,
+          isHovered,
+          isPressed,
+          isDisabled,
+          isFocusVisible
+        });
+      },
+      children: /* @__PURE__ */jsx(Icon, {
+        intent: "action.close",
+        size: "sm"
+      })
+    })]
+  });
+};
+Toast.displayName = toastMeta.displayName;
+/**
+* The Toast host — place once near the root of your app and pass the queue
+* created with `createToastQueue`. Renders each queued toast as a
+* `Toast` surface.
+*
+* Uses `vars.elevation.raised` — the first component in the system that
+* lifts off the page plane without being a full overlay.
+*
+* @example
+* ```tsx
+* <ToastRegion queue={toastQueue} />
+* ```
+*/
+var ToastRegion = props => {
+  return /* @__PURE__ */jsx(UNSTABLE_ToastRegion, {
+    ...props,
+    "data-scope": "toast-region",
+    "data-part": "root",
+    style: {
+      boxSizing: "border-box",
+      position: "fixed",
+      insetBlockEnd: vars.spacing.inset.surface.md,
+      insetInlineEnd: vars.spacing.inset.surface.md,
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.spacing.gap.stack.sm,
+      zIndex: vars.zIndex.layer.transient,
+      maxWidth: TOAST_REGION_MAX_WIDTH,
+      outline: "none"
+    },
+    children: ({
+      toast
+    }) => {
+      return /* @__PURE__ */jsx(Toast, {
+        toast
+      });
+    }
+  });
+};
+ToastRegion.displayName = toastRegionMeta.displayName;
+
+//#endregion
+export { Toast, ToastRegion, createToastQueue, toastMeta, toastRegionMeta };