@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/dist/components/AnimatedOpacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedOpacity.js","sourceRoot":"","sources":["../../src/components/AnimatedOpacity.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAQ1C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyB;;wBAE1B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,GAAG,IAAI;;;;CAI9D,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAwB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,GAAG,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE;IAChH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IACjE,MAAM,SAAS,GAAG,MAAM,EAAsB,CAAA;IAC9C,MAAM,eAAe,GAAG,MAAM,EAAuB,CAAA;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,eAAe,KAAK,SAAS,CAAA;QACnD,MAAM,oBAAoB,GAAG,OAAO,KAAK,eAAe,CAAC,OAAO,CAAA;QAChE,eAAe,CAAC,OAAO,GAAG,OAAO,CAAA;QACjC,IAAI,aAAa;YAAE,OAAM;QACzB,IAAI,oBAAoB,EAAE,CAAC;YACzB,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;gBACtC,SAAS,CAAC,OAAO,GAAG,SAAS,CAAA;gBAC7B,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;YAC9C,CAAC;YACD,IAAI,OAAO;gBAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;YACjC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,OAAO;oBAAE,UAAU,CAAC,IAAI,CAAC,CAAA;gBAC9B,SAAS,CAAC,OAAO,GAAG,SAAS,CAAA;YAC/B,CAAC,EAAE,UAAU,CAAC,CAAA;QAChB,CAAC;aAAM,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACzC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;QACvC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QACxC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,OAAO,CACL,KAAC,MAAM,IAAC,GAAG,EAAE,GAAG,iBAAe,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,gBAAgB,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC,YACxG,OAAO,GACD,CACV,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/AutoFocus.d.ts

@@ -0,0 +1,23 @@
+import { TagPriorityElement } from '@stack-spot/portal-components';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A delay in ms to focus the first focusable element.
+     */
+    delay?: number;
+    /**
+     * Instead of focusing the first element overall, focus the first according to this list of priorities.
+     *
+     * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+     */
+    priority?: TagPriorityElement[];
+    /**
+     * Ignores any element that matches this query selector.
+     */
+    ignore?: string;
+}
+/**
+ * Focus the first focusable child as soon as the component mounts.
+ */
+export declare const AutoFocus: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=AutoFocus.d.ts.map

package/dist/components/AutoFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoFocus.d.ts","sourceRoot":"","sources":["../../src/components/AutoFocus.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAInF,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AASD;;GAEG;AACH,eAAO,MAAM,SAAS,kGASpB,CAAA"}

package/dist/components/AutoFocus.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/display-name */
+import { focusFirstChild } from '@stack-spot/portal-components';
+import { forwardRef, useEffect, useRef } from 'react';
+import { styled } from 'styled-components';
+const FlexibleDiv = styled.div `
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+/**
+ * Focus the first focusable child as soon as the component mounts.
+ */
+export const AutoFocus = forwardRef(({ children, delay = 0, priority, ignore, ...props }, externalRef) => {
+    const localRef = useRef(null);
+    const ref = externalRef ?? localRef;
+    useEffect(() => {
+        setTimeout(() => focusFirstChild(ref.current, { priority, ignore }), delay);
+    }, []);
+    return _jsx(FlexibleDiv, { ref: ref, ...props, children: children });
+});
+//# sourceMappingURL=AutoFocus.js.map

package/dist/components/AutoFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoFocus.js","sourceRoot":"","sources":["../../src/components/AutoFocus.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAO,EAAE,eAAe,EAAsB,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,UAAU,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAmB1C,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE;IAC9H,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7C,MAAM,GAAG,GAAG,WAAwC,IAAI,QAAQ,CAAA;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,CAAA;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAC,WAAW,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YAAG,QAAQ,GAAe,CAAA;AACnE,CAAC,CAAC,CAAA"}

package/dist/components/ButtonFavorite.d.ts

@@ -0,0 +1,40 @@
+import { BaseFavoriteProps } from '@stack-spot/citric-react';
+export interface ItemFavorite {
+    id?: string;
+    slug?: string;
+}
+export interface Favorite<T extends ItemFavorite> {
+    /**
+     * id or slug to be used on functions
+     */
+    idOrSlug: string;
+    /**
+     * Array containing the list of favorite items.
+     */
+    listFavorites?: T[];
+    /**
+     * Function to add an item to the list of favorites.
+     * @param idOrSlug - The ID or slug of the content to be added to the favorites list.
+     * @returns void
+     */
+    onAddFavorite?: (idOrSlug: string) => Promise<boolean>;
+    /**
+     * Function to remove an item from the list of favorites.
+     * @param idOrSlug - The ID or slug of the content to be removed from the favorites list.
+     * @returns void
+     */
+    onRemoveFavorite?: (idOrSlug: string) => Promise<boolean>;
+}
+interface Props<T extends ItemFavorite> {
+    /**
+     * An object containing favorite items and related operations.
+    */
+    favorite: Favorite<T>;
+    /**
+     * @default 'square'
+     */
+    appearance?: BaseFavoriteProps['appearance'];
+}
+export declare const ButtonFavorite: <T extends ItemFavorite>({ favorite, appearance }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonFavorite.d.ts.map

package/dist/components/ButtonFavorite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFavorite.d.ts","sourceRoot":"","sources":["../../src/components/ButtonFavorite.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,0BAA0B,CAAA;AAKtE,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ,CAAC,CAAC,SAAS,YAAY;IAC9C;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACvD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3D;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,YAAY;IACpC;;MAEE;IACH,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,YAAY,4BAAuC,KAAK,CAAC,CAAC,CAAC,4CAWnG,CAAA"}

package/dist/components/ButtonFavorite.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Favorite } from '@stack-spot/citric-react';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useState } from 'react';
+import { dictionaryFavorites } from './form/dictionary.js';
+export const ButtonFavorite = ({ favorite, appearance = 'square' }) => {
+    const [isFavorite, setIsFavorite] = useState(false);
+    const { idOrSlug, listFavorites } = favorite || {};
+    useEffect(() => {
+        setIsFavorite(!!listFavorites?.some((fav) => fav.slug === idOrSlug || fav.id === idOrSlug));
+    }, [listFavorites]);
+    return (_jsx(ButtonWrapper, { isFavorite: isFavorite, favorite: favorite, appearance: appearance }));
+};
+const ButtonWrapper = ({ isFavorite, favorite, appearance }) => {
+    const t = useTranslate(dictionaryFavorites);
+    const { idOrSlug, onAddFavorite, onRemoveFavorite } = favorite;
+    const [loading, setLoading] = useState(false);
+    const handleAction = async (idOrSlug, action) => {
+        setLoading(true);
+        await action?.(idOrSlug);
+        setLoading(false);
+    };
+    return _jsx(Favorite, { loading: loading, appearance: appearance, "aria-label": `${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`, title: `${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`, value: isFavorite, onChange: checked => handleAction(idOrSlug, checked ? onAddFavorite : onRemoveFavorite) });
+};
+//# sourceMappingURL=ButtonFavorite.js.map

package/dist/components/ButtonFavorite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonFavorite.js","sourceRoot":"","sources":["../../src/components/ButtonFavorite.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAyCvD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAyB,EAAE,QAAQ,EAAE,UAAU,GAAG,QAAQ,EAAY,EAAE,EAAE;IACtG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAA;IAC7F,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAI,CACtF,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,CAAyB,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EACY,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAA;IAC3C,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,QAAQ,CAAA;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,KAAK,EAAE,QAAgB,EAAE,MAA+C,EAAE,EAAE;QAC/F,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,MAAM,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAA;QACxB,UAAU,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,KAAC,QAAQ,IACd,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,gBACV,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAClE,KAAK,EAAE,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAC7D,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,GACvF,CAAA;AACJ,CAAC,CAAA"}

package/dist/components/Code.d.ts

@@ -13,7 +13,8 @@ export interface Props extends WithChildren {
     onNewFile?: CodeAction;
     onCopyCode?: CodeAction;
     language?: string;
+    showLineNumbers?: boolean;
 }
-export declare const Code: ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, ...props }: Pick<CodeProps, "className" | "messageId"> & Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Code: ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, showLineNumbers, ...props }: Pick<CodeProps, "className" | "messageId"> & Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Code.d.ts.map

package/dist/components/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;AAET,KAAK,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,GAC/C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACjC,UAAU,GACV;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,KAAM,SAAQ,YAAY;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6DD,eAAO,MAAM,IAAI,oGASd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,KAAK,4CA+FpD,CAAA"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAMH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAIvC,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;AAET,KAAK,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,GAC/C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACjC,UAAU,GACV;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,KAAM,SAAQ,YAAY;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwED,eAAO,MAAM,IAAI,qHAUd,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG,KAAK,4CA8GpD,CAAA"}

package/dist/components/Code.js

@@ -2,14 +2,15 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 /**
  * Copied from the extension's webview.
  */
-import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons';
-import { IconButton } from '@citric/ui';
+import { IconButton, Text } from '@stack-spot/citric-react';
 import { theme, useThemeKind } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
 import styled from 'styled-components';
+import { copyTextToClipboardWithFallback } from '../utils/copy-to-clipboard.js';
+import { languages } from '../utils/programming-languages.js';
 const CodeBox = styled.code `
   background: ${theme.color.light[500]};
   border-radius: 6px;
@@ -31,23 +32,34 @@ const CodeBox = styled.code `
     }
   }
 
-  .action-bar {
+  .header-code {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     background: ${theme.color.light[600]};
     padding: 4px 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 
-    button {
-      background: transparent;
-      border: none;
-      opacity: 0.75;
-      transition: opacity 0.2s;
+    .action-bar {
+      display: flex;
+      flex-direction: row;
+     
+      button {
+        background: transparent;
+        border: none;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
 
-      &:hover {
-        opacity: 1;
+      .copy-btn {
+        &:after {
+          left: -30px; // prevents scrolling in the horizontal axis.
+        }
       }
     }
   }
@@ -67,13 +79,14 @@ const CodeBox = styled.code `
 const lineNumbersStyle = {
     userSelect: 'none',
 };
-export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, ...props }) => {
+export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language, children, showActionBar, showLineNumbers = true, ...props }) => {
     const t = useTranslate(dictionary);
     const themeKind = useThemeKind();
-    const [showLines, setShowLines] = useState(true);
+    const [showLines, setShowLines] = useState(showLineNumbers);
     const match = /language-(\w+)/.exec(className || '');
     const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt';
     const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim();
+    const languageExtension = languages.find(l => l.value === computedLanguage)?.extensions?.[0] ?? '.txt';
     function onClickInsert() {
         onInsertCode?.(content, computedLanguage);
     }
@@ -82,37 +95,52 @@ export const Code = ({ className, onInsertCode, onNewFile, onCopyCode, language,
     }
     function onClickCopy() {
         onCopyCode?.(content, computedLanguage);
-        // try-catch because the client may not support `navigator.clipboard`. Example: Chromium Embedded Browser (CEF).
-        try {
-            navigator.clipboard.writeText(content);
-        }
-        catch { /* empty */ }
+        copyTextToClipboardWithFallback(content);
     }
     if (children === undefined)
         return _jsx(_Fragment, {});
-    if (!(/language-(\w+)/.exec(className || ''))) {
+    if (computedLanguage === 'txt') {
         return (_jsx("code", { ...props, className: className, children: children }));
     }
-    return (_jsxs(CodeBox, { className: ['code-box', themeKind].join(' '), children: [showActionBar && (_jsxs("div", { className: "action-bar", role: "toolbar", children: [_jsx(IconButton, { "aria-label": showLines ? t.hideLines : t.showLines, title: showLines ? t.hideLines : t.showLines, onClick: () => setShowLines(v => !v), style: { position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }, children: _jsx(Collapse, {}) }), _jsx(IconButton, { "aria-label": t.copy, title: t.copy, onClick: onClickCopy, style: { position: 'relative' }, children: _jsx(Copy, {}) }), onInsertCode
-                        ? (_jsx(IconButton, { "aria-label": t.insert, title: t.insert, onClick: onClickInsert, style: { position: 'relative' }, children: _jsx(ChevronDoubleDown, { style: { transform: 'rotate(90deg)' } }) }))
-                        : null, onNewFile
-                        ? (_jsx(IconButton, { "aria-label": t.newFile, title: t.newFile, onClick: onClickNewFile, style: { position: 'relative' }, children: _jsx(AddCode, {}) }))
-                        : null] })), _jsx("div", { children: _jsx(SyntaxHighlighter, { ...props, className: "highlighter", style: themeKind === 'dark' ? materialDark : vs, language: computedLanguage, PreTag: "div", showLineNumbers: showLines, lineNumberContainerStyle: lineNumbersStyle, lineNumberStyle: lineNumbersStyle, children: content }) })] }));
+    return (_jsxs(CodeBox, { className: ['code-box', themeKind, className].join(' '), children: [showActionBar && (_jsxs("div", { className: "header-code", children: [_jsx("div", { children: _jsx(Text, { appearance: "code2", children: computedLanguage ?? '' }) }), _jsxs("div", { className: "action-bar", role: "toolbar", children: [_jsx(IconButton, { icon: "Collapse", "aria-label": showLines ? t.hideLines : t.showLines, title: showLines ? t.hideLines : t.showLines, onClick: () => setShowLines(v => !v), style: { position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' } }), _jsx(IconButton, { icon: "Download", "aria-label": t.downloadCode, title: t.downloadCode, onClick: () => {
+                                    try {
+                                        const extension = languageExtension;
+                                        const filename = `download${extension}`;
+                                        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+                                        const link = document.createElement('a');
+                                        link.href = URL.createObjectURL(blob);
+                                        link.download = filename;
+                                        document.body.appendChild(link);
+                                        link.click();
+                                        document.body.removeChild(link);
+                                        URL.revokeObjectURL(link.href);
+                                    }
+                                    catch (e) {
+                                        // eslint-disable-next-line no-console
+                                        console.error(t.downloadError, e);
+                                    }
+                                } }), _jsx(IconButton, { icon: "Copy", "aria-label": t.copy, title: t.copy, onClick: onClickCopy, style: { position: 'relative' }, feedback: t.copied, className: "copy-btn" }), onInsertCode ? _jsx(IconButton, { icon: "ChevronDoubleDown", "aria-label": t.insert, title: t.insert, onClick: onClickInsert, style: { position: 'relative', transform: 'rotate(90deg)' } }) : null, onNewFile ? _jsx(IconButton, { icon: "AddCode", "aria-label": t.newFile, title: t.newFile, onClick: onClickNewFile, style: { position: 'relative' } }) : null] })] })), _jsx("div", { children: _jsx(SyntaxHighlighter, { ...props, className: "highlighter", style: themeKind === 'dark' ? materialDark : vs, language: computedLanguage, PreTag: "div", showLineNumbers: showLines, lineNumberContainerStyle: lineNumbersStyle, lineNumberStyle: lineNumbersStyle, children: content }) })] }));
 };
 const dictionary = {
     en: {
         copy: 'Copy code to the clipboard',
+        copied: 'Copied',
         insert: 'Inject code into editor',
         newFile: 'Creates a new file with this code as its content',
         hideLines: 'Hide line numbers',
         showLines: 'Show line numbers',
+        downloadCode: 'Download the code',
+        downloadError: 'Error downloading code',
     },
     pt: {
         copy: 'Copiar código para a área de transferência',
+        copied: 'Copiado',
         insert: 'Inserir código no editor',
         newFile: 'Criar um novo arquivo com este código como conteúdo',
         hideLines: 'Esconder números das linhas',
         showLines: 'Mostrar números das linhas',
+        downloadCode: 'Fazer download do código',
+        downloadError: 'Erro ao fazer download do código',
     },
 };
 //# sourceMappingURL=Code.js.map

package/dist/components/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,gDAAgD,CAAA;AACjF,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAqBtC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAA;gBACX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;eAcvB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;kBAU3B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BvC,CAAA;AAED,MAAM,gBAAgB,GAAkB;IACtC,UAAU,EAAE,MAAM;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EAC2C,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChD,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IACpD,MAAM,gBAAgB,GAAG,QAAQ,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,KAAK,CAAA;IAC7E,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;IAEvE,SAAS,aAAa;QACpB,YAAY,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAA;IAC3C,CAAC;IAED,SAAS,cAAc;QACrB,SAAS,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,WAAW;QAClB,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAA;QACvC,gHAAgH;QAChH,IAAI,CAAC;YACH,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QACxC,CAAC;QAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IAED,IAAI,QAAQ,KAAK,SAAS;QAAE,OAAO,mBAAK,CAAA;IACxC,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC;QAC9C,OAAO,CACL,kBAAU,KAAK,EAAE,SAAS,EAAE,SAAS,YAClC,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,OAAO,IAAC,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAClD,aAAa,IAAI,CAChB,eAAK,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,aACxC,KAAC,UAAU,kBACG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjD,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACpC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,EAAE,YAElH,KAAC,QAAQ,KAAG,GACD,EACb,KAAC,UAAU,kBACG,CAAC,CAAC,IAAI,EAClB,KAAK,EAAE,CAAC,CAAC,IAAI,EACb,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAE/B,KAAC,IAAI,KAAG,GACG,EACZ,YAAY;wBACX,CAAC,CAAC,CACA,KAAC,UAAU,kBACG,CAAC,CAAC,MAAM,EACpB,KAAK,EAAE,CAAC,CAAC,MAAM,EACf,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAE/B,KAAC,iBAAiB,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,GAAI,GACjD,CACd;wBACD,CAAC,CAAC,IAAI,EACP,SAAS;wBACR,CAAC,CAAC,CACA,KAAC,UAAU,kBACG,CAAC,CAAC,OAAO,EACrB,KAAK,EAAE,CAAC,CAAC,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAE/B,KAAC,OAAO,KAAG,GACA,CACd;wBACD,CAAC,CAAC,IAAI,IACJ,CACP,EACD,wBACE,KAAC,iBAAiB,OACZ,KAAK,EACT,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAC/C,QAAQ,EAAE,gBAAgB,EAC1B,MAAM,EAAC,KAAK,EACZ,eAAe,EAAE,SAAS,EAC1B,wBAAwB,EAAE,gBAAgB,EAC1C,eAAe,EAAE,gBAAgB,YAEhC,OAAO,GACU,GAChB,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,4BAA4B;QAClC,MAAM,EAAE,yBAAyB;QACjC,OAAO,EAAE,kDAAkD;QAC3D,SAAS,EAAE,mBAAmB;QAC9B,SAAS,EAAE,mBAAmB;KAC/B;IACD,EAAE,EAAE;QACF,IAAI,EAAE,4CAA4C;QAClD,MAAM,EAAE,0BAA0B;QAClC,OAAO,EAAE,qDAAqD;QAC9D,SAAS,EAAE,6BAA6B;QACxC,SAAS,EAAE,4BAA4B;KACxC;CACmB,CAAA"}
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/components/Code.tsx"],"names":[],"mappings":"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"}

package/dist/components/ComponentNavigator.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Map of string keys to React components.
+ */
+export type NavigationMap = Record<string, React.ComponentType<any>>;
+/**
+ * Navigation component describing which component to render and its props.
+ */
+export type NavigationComponent<T extends NavigationMap, K extends keyof T = keyof T> = {
+    /** Component key to render. */
+    component: K;
+    /** Props for the component. */
+    props?: T[K] extends React.ComponentType<infer P> ? P : never;
+    /** Render in fullscreen mode. */
+    fullScreen?: boolean;
+};
+export interface NavigationContextType<T extends NavigationMap> {
+    /** Navigate to a new component. */
+    navigate: <K extends keyof T>(item: NavigationComponent<T, K>) => Promise<void>;
+    /** Go back to previous component. */
+    goBack: () => void;
+    /** True if can go back. */
+    canGoBack: boolean;
+    /** Current component. */
+    currentItem: NavigationComponent<T>;
+}
+export interface ComponentNavigatorProps<T extends NavigationMap, K extends keyof T> {
+    /** Initial component to render. */
+    initialItem: NavigationComponent<T, K>;
+    /** Map of available components. */
+    components: T;
+    /** Optional title renderer. */
+    renderTitle?: (item: NavigationComponent<T, keyof T>) => React.ReactNode;
+    /** Optional CSS class. */
+    className?: string;
+}
+export declare function ComponentNavigator<T extends NavigationMap, K extends keyof T>({ initialItem, components, renderTitle, className, }: ComponentNavigatorProps<T, K>): import("react/jsx-runtime").JSX.Element;
+export declare function useComponentNavigation<T extends NavigationMap>(): NavigationContextType<T>;
+//# sourceMappingURL=ComponentNavigator.d.ts.map

package/dist/components/ComponentNavigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentNavigator.d.ts","sourceRoot":"","sources":["../../src/components/ComponentNavigator.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpE;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI;IACtF,+BAA+B;IAC/B,SAAS,EAAE,CAAC,CAAC;IAEb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAE9D,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAA;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,aAAa;IAC5D,mCAAmC;IACnC,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhF,qCAAqC;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB,2BAA2B;IAC3B,SAAS,EAAE,OAAO,CAAC;IAEnB,yBAAyB;IACzB,WAAW,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,CAAC;IACjF,mCAAmC;IACnC,WAAW,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtC,mCAAmC;IACpC,UAAU,EAAE,CAAC,CAAC;IAEd,+BAA+B;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAExE,0BAA0B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,EAC7E,WAAW,EACX,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,2CAiC/B;AAED,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,aAAa,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAM1F"}

package/dist/components/ComponentNavigator.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Row } from '@stack-spot/citric-react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+const NavigationContext = createContext(null);
+export function ComponentNavigator({ initialItem, components, renderTitle, className, }) {
+    const [navigationStack, setNavigationStack] = useState([initialItem]);
+    const currentItem = navigationStack[navigationStack.length - 1];
+    const navigate = useCallback((item) => { setNavigationStack((prev) => [...prev, item]); }, []);
+    const canGoBack = navigationStack.length > 1;
+    const goBack = useCallback(() => {
+        if (canGoBack) {
+            setNavigationStack((prev) => prev.slice(0, -1));
+        }
+    }, [canGoBack]);
+    const navigationContext = useMemo(() => ({ navigate, goBack, canGoBack, currentItem }), [navigate, goBack, canGoBack, currentItem]);
+    const Component = components[currentItem.component];
+    const isFullScreen = currentItem.fullScreen;
+    if (!Component) {
+        // eslint-disable-next-line no-console
+        console.error(`Componente not found: ${String(currentItem.component)}`);
+    }
+    return (_jsx(NavigationContext.Provider, { value: navigationContext, children: _jsxs("div", { className: `content-navigator ${className || isFullScreen ? 'full' : ''}`, role: "navigation", children: [canGoBack && (_jsxs(Row, { gap: "12px", style: { alignSelf: 'stretch' }, children: [_jsx(IconButton, { icon: "ArrowLeft", onClick: goBack, className: "back-button", "aria-label": "Back" }), renderTitle?.(currentItem)] })), _jsx(Component, { ...currentItem.props })] }) }));
+}
+export function useComponentNavigation() {
+    const context = useContext(NavigationContext);
+    if (!context) {
+        throw new Error('useComponentNavigation should be used inside ComponentNavigator');
+    }
+    return context;
+}
+//# sourceMappingURL=ComponentNavigator.js.map

package/dist/components/ComponentNavigator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentNavigator.js","sourceRoot":"","sources":["../../src/components/ComponentNavigator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAiDjF,MAAM,iBAAiB,GAAG,aAAa,CAA8C,IAAI,CAAC,CAAA;AAE1F,MAAM,UAAU,kBAAkB,CAA6C,EAC7E,WAAW,EACX,UAAU,EACV,WAAW,EACX,SAAS,GACqB;IAC9B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA2B,CAAC,WAAW,CAAC,CAAC,CAAA;IAC/F,MAAM,WAAW,GAAG,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAE/D,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,IAA4B,EAAE,EAAE,GAAG,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACrH,MAAM,SAAS,GAAG,eAAe,CAAC,MAAM,GAAG,CAAC,CAAA;IAC5C,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,SAAS,EAAE,CAAC;YACd,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;IACnI,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;IACnD,MAAM,YAAY,GAAG,WAAW,CAAC,UAAU,CAAA;IAE3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,yBAAyB,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;IACzE,CAAC;IAED,OAAO,CAAC,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAyD,YAClG,eAAK,SAAS,EAAE,qBAAqB,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,YAAY,aAC9F,SAAS,IAAI,CACZ,MAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAC7C,KAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,aAAa,gBAAY,MAAM,GAAG,EACzF,WAAW,EAAE,CAAC,WAAW,CAAC,IACvB,CACP,EACD,KAAC,SAAS,OAAM,WAAW,CAAC,KAAa,GAAI,IACzC,GACqB,CAC5B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAA;IACpF,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/dist/components/Fading.d.ts

@@ -0,0 +1,32 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { WithChildren } from '../types.js';
+interface Props extends WithChildren, WithStyle {
+    /**
+     * Whether or not the content is visible.
+     */
+    visible: boolean;
+    /**
+     * Duration of the animation in ms.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Function to run right before animation to show the content starts.
+     */
+    beforeFadeIn?: () => void;
+    /**
+     * Function to run right before animation to hide the content starts.
+     */
+    beforeFadeOut?: () => void;
+    /**
+     * Function to run right after the animation to show the content ends.
+     */
+    afterFadeIn?: () => void;
+    /**
+     * Function to run right after the animation to hide the content ends.
+     */
+    afterFadeOut?: () => void;
+}
+export declare const Fading: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Fading.d.ts.map

package/dist/components/Fading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fading.d.ts","sourceRoot":"","sources":["../../src/components/Fading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,kGAgCjB,CAAA"}

package/dist/components/Fading.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+export const Fading = forwardRef(({ visible, children, duration = 300, afterFadeIn, afterFadeOut, beforeFadeIn, beforeFadeOut, className, style }, ref) => {
+    const [isOpaque, setOpaque] = useState(visible);
+    const [isRendered, setRendered] = useState(visible);
+    const previous = useRef(visible);
+    const timeout = useRef([]);
+    const opacity = { transition: `opacity ${duration / 1000}s`, opacity: isOpaque ? 1 : 0 };
+    useEffect(() => {
+        if (previous.current === visible)
+            return;
+        timeout.current.forEach(window.clearTimeout);
+        timeout.current = [];
+        if (visible) {
+            setRendered(true);
+            if (afterFadeIn)
+                timeout.current.push(window.setTimeout(afterFadeIn, duration));
+            beforeFadeIn?.();
+            timeout.current.push(window.setTimeout(() => setOpaque(true), 0));
+        }
+        else {
+            setOpaque(false);
+            beforeFadeOut?.();
+            timeout.current.push(window.setTimeout(() => {
+                setRendered(false);
+                afterFadeOut?.();
+            }, duration));
+        }
+        previous.current = visible;
+    }, [visible]);
+    return isRendered ? _jsx("div", { ref: ref, className: className, style: { ...style, ...opacity }, children: children }) : null;
+});
+//# sourceMappingURL=Fading.js.map

package/dist/components/Fading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fading.js","sourceRoot":"","sources":["../../src/components/Fading.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AA+B/D,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAwB,CACtD,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,EAC/G,GAAG,EACH,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC/C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;IAChC,MAAM,OAAO,GAAG,MAAM,CAAW,EAAE,CAAC,CAAA;IACpC,MAAM,OAAO,GAAwB,EAAE,UAAU,EAAE,WAAW,QAAQ,GAAG,IAAI,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE7G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,KAAK,OAAO;YAAE,OAAM;QACxC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;QAC5C,OAAO,CAAC,OAAO,GAAG,EAAE,CAAA;QACpB,IAAI,OAAO,EAAE,CAAC;YACZ,WAAW,CAAC,IAAI,CAAC,CAAA;YACjB,IAAI,WAAW;gBAAE,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAA;YAC/E,YAAY,EAAE,EAAE,CAAA;YAChB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;QAEnE,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,KAAK,CAAC,CAAA;YAChB,aAAa,EAAE,EAAE,CAAA;YACjB,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC1C,WAAW,CAAC,KAAK,CAAC,CAAA;gBAClB,YAAY,EAAE,EAAE,CAAA;YAClB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAA;QACf,CAAC;QACD,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAA;IAC5B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,UAAU,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,OAAO,EAAE,YAAG,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,CAAA;AACnH,CAAC,CAAC,CAAA"}

package/dist/components/FadingOverflow.d.ts

@@ -3,10 +3,35 @@ import { WithChildren } from '../types.js';
 type Side = 'top' | 'right' | 'left' | 'bottom';
 type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows';
 interface Props extends WithChildren, WithStyle {
+    /**
+     * How to scroll the content.
+     * - none: overflow is hidden. No scrolling.
+     * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+     * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+     * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+     * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+     * There are no scrollbars in this scenario.
+     * @default 'none'
+     */
     scroll?: ScrollType;
+    /**
+     * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+     * @default false
+     */
     enableHorizontalScrollWithVerticalWheel?: boolean;
+    /**
+     * Which sides to fade when the content overflows.
+     *
+     * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+     * believed combining linear gradients would work, but it doesn't.
+     */
     sides?: Side[];
 }
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
 export declare const FadingOverflow: ({ children, scroll, sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FadingOverflow.d.ts.map

package/dist/components/FadingOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FadingOverflow.d.ts","sourceRoot":"","sources":["../../src/components/FadingOverflow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAIxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAErD,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,uCAAuC,CAAC,EAAE,OAAO,CAAC;IAClD,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAqFD,eAAO,MAAM,cAAc,8FAC2E,KAAK,4CAoI1G,CAAA"}
+{"version":3,"file":"FadingOverflow.d.ts","sourceRoot":"","sources":["../../src/components/FadingOverflow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAIxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAErD,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,uCAAuC,CAAC,EAAE,OAAO,CAAC;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAwFD;;;;GAIG;AACH,eAAO,MAAM,cAAc,8FAC2E,KAAK,4CAoI1G,CAAA"}

package/dist/components/FadingOverflow.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBox } from '@citric/core';
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons';
+import { Icon } from '@stack-spot/citric-icons';
 import { listToClass, theme } from '@stack-spot/portal-theme';
 import { debounce } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { styled } from 'styled-components';
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
 const MIN_CHECK_INTERVAL_MS = 20;
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20;
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4;
+// Fade masks
 const masks = {
     right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
     left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-    top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-    bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    top: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+    bottom: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
     horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
     vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
 };
@@ -43,7 +48,7 @@ const OverflowBox = styled.div `
     pointer-events: none;
     transition: opacity 0.3s;
 
-    ${IconBox} {
+    .citric-icon {
       background-color: ${theme.color.light[300]};
       border-radius: 50%;
       width: 16px;
@@ -83,8 +88,11 @@ const OverflowBox = styled.div `
     width: unset;
   }
 `;
-const SCROLL_INTERVAL_MS = 20;
-const SCROLL_PX = 4;
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ *
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
 export const FadingOverflow = ({ children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }) => {
     const ref = useRef(null);
     useEffect(() => {
@@ -211,6 +219,6 @@ export const FadingOverflow = ({ children, scroll = 'none', sides, enableHorizon
         element.addEventListener('wheel', scrollWithWheel);
         return () => element.removeEventListener('wheel', scrollWithWheel);
     }, [ref.current, enableHorizontalScrollWithVerticalWheel]);
-    return scroll === 'arrows' ? (_jsxs(OverflowBox, { ...props, className: listToClass(['scroll-arrows', className]), children: [_jsx("div", { className: "content", ref: ref, children: children }), _jsx("div", { className: "scroll-to-left", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronLeft, {}) }) }), _jsx("div", { className: "scroll-to-right", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronRight, {}) }) }), _jsx("div", { className: "scroll-to-top", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronUp, {}) }) }), _jsx("div", { className: "scroll-to-bottom", "aria-hidden": true, children: _jsx(IconBox, { size: "xs", children: _jsx(ChevronDown, {}) }) })] })) : _jsx(OverflowBox, { ...props, className: className, ref: ref, children: children });
+    return scroll === 'arrows' ? (_jsxs(OverflowBox, { ...props, className: listToClass(['scroll-arrows', className]), children: [_jsx("div", { className: "content", ref: ref, children: children }), _jsx("div", { className: "scroll-to-left", "aria-hidden": true, children: _jsx(Icon, { icon: "ChevronLeft", size: "xs" }) }), _jsx("div", { className: "scroll-to-right", "aria-hidden": true, children: _jsx(Icon, { icon: "ChevronRight", size: "xs" }) }), _jsx("div", { className: "scroll-to-top", "aria-hidden": true, children: _jsx(Icon, { icon: "ChevronUp", size: "xs" }) }), _jsx("div", { className: "scroll-to-bottom", "aria-hidden": true, children: _jsx(Icon, { icon: "ChevronDown", size: "xs" }) })] })) : _jsx(OverflowBox, { ...props, className: className, ref: ref, children: children });
 };
 //# sourceMappingURL=FadingOverflow.js.map