@stack-spot/citric-react 0.11.0 → 0.12.0

package/dist/citric.css

@@ -1782,10 +1782,6 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
     border-radius: var(--radius-xs);
   }
 
-  &.text {
-    background-color: transparent;
-  }
-
   /* Colors */
 
   &[data-color-scheme] {

package/dist/components/ImageBox.d.ts

@@ -0,0 +1,49 @@
+import { HTMLTag } from '../types.js';
+type ImageBoxTag = 'a' | 'button' | 'span' | 'div';
+export interface BaseImageBoxProps<T extends ImageBoxTag> {
+    /**
+     * The HTML element to render.
+     *
+     * @default 'div'
+     */
+    tag?: T;
+    /**
+     * The box appearance.
+     *
+     * @default 'circle'
+     */
+    appearance?: 'circle' | 'square';
+    /**
+     * Size of the box.
+     *
+     * @default 'sm'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
+     */
+    feedback?: string;
+    /**
+     * Only valid if `tag` is "button" or "a".
+     *
+     * Whether or not a click in this button/link should generate analytics data.
+     *
+     * This only takes effect if there's a CitricController in React's context. The value of `analytics` is passed to the function
+     * `onClickButton/onClickLink` of the controller.
+     *
+     * @default false
+     */
+    analytics?: boolean;
+}
+export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>;
+export declare function ImageBox<T extends ImageBoxTag = 'div'>({ tag, appearance, size, className, analytics, onClick, feedback, ...props }: ImageBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shortcut to `<ImageBox tag="button" />`
+ */
+export declare function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export declare function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ImageBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGlC,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW;IACtD;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EACpD,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkB/F;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEtE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAE/D"}

package/dist/components/ImageBox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useCallback } from 'react';
+import { useCitricController } from '../context/hooks.js';
+import { CitricComponent } from './CitricComponent.js';
+export function ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
+    const citric = useCitricController();
+    const handleClick = useCallback((e) => {
+        onClick?.(e);
+        if (tag === 'button')
+            citric?.onClickButton?.(e, analytics ?? false);
+        else if (tag === 'a')
+            citric?.onClickLink?.(e, analytics ?? false);
+    }, [tag]);
+    return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass([appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
+}
+/**
+ * Shortcut to `<ImageBox tag="button" />`
+ */
+export function ImageButton(props) {
+    return ImageBox({ ...props, tag: 'button', type: props.type || 'button' });
+}
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export function ImageLink(props) {
+    return ImageBox({ ...props, tag: 'a' });
+}
+//# sourceMappingURL=ImageBox.js.map

package/dist/components/ImageBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,MAAM,UAAU,QAAQ,CACtB,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,KAA2C;IACrE,OAAO,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC5E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAsC;IAC9D,OAAO,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACzC,CAAC"}

package/dist/components/MenuOverlay/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyC,SAAS,EAA0B,MAAM,SAAS,CAAA;AAiFlG;;GAEG;AACH,wBAAgB,IAAI,CAClB,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAqDlI"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/Menu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyC,SAAS,EAA0B,MAAM,SAAS,CAAA;AAkFlG;;GAEG;AACH,wBAAgB,IAAI,CAClB,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAqDlI"}

package/dist/components/MenuOverlay/Menu.js

@@ -10,9 +10,9 @@ import { MenuProvider, useMenuController, useMenuState } from './context.js';
 import { keyboardNavigation } from './keyboard.js';
 // Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
 const RENDER_DELAY = 20;
-function Submenu({ children, label, className, icon, iconRight }) {
+function Submenu({ children, label, className, icon, iconRight, style }) {
     const controller = useMenuController();
-    return (_jsxs("button", { className: listToClass([className, 'submenu']), onClick: (e) => {
+    return (_jsxs("button", { className: listToClass([className, 'submenu']), style: style, onClick: (e) => {
             e.stopPropagation();
             const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined;
             controller?.setValue({ items: children, label, parent: controller?.getValue() });
@@ -26,8 +26,8 @@ function Submenu({ children, label, className, icon, iconRight }) {
             }
         }, children: [icon, _jsx("span", { children: label }), iconRight] }));
 }
-function MenuSection({ children, label, className }) {
-    return (_jsxs("section", { className: className, children: [label && _jsx("h6", { children: label }), _jsx("nav", { children: _jsx(MenuItems, { items: children }) }), !label && _jsx("hr", {})] }));
+function MenuSection({ children, label, className, style }) {
+    return (_jsxs("section", { className: className, style: style, children: [label && _jsx("h6", { children: label }), _jsx("nav", { children: _jsx(MenuItems, { items: children }) }), !label && _jsx("hr", {})] }));
 }
 function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }) {
     const overlayController = useOverlayController();

package/dist/components/MenuOverlay/Menu.js.map

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

package/dist/components/MenuOverlay/types.d.ts

@@ -1,3 +1,4 @@
+import { WithStyle } from '@stack-spot/portal-theme';
 import { BaseOverlayProps } from '../Overlay/types.js';
 interface CustomLabel {
     /**
@@ -55,17 +56,13 @@ interface ItemWithIcon {
      */
     iconRight?: React.ReactElement;
 }
-export interface MenuAction extends ItemWithIcon, Action {
+export interface MenuAction extends ItemWithIcon, Action, WithStyle {
     /**
      * Whether or not this option is currently active.
      */
     active?: boolean;
-    /**
-     * A class to be added to this item.
-     */
-    className?: string;
 }
-interface MenuGroup {
+interface MenuGroup extends WithStyle {
     /**
      * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
      */
@@ -74,10 +71,6 @@ interface MenuGroup {
      * The items of this group.
      */
     children: MenuItem[];
-    /**
-    * A class to be added to this item.
-    */
-    className?: string;
 }
 export interface MenuSection extends MenuGroup {
     type: 'section';

package/dist/components/MenuOverlay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/MenuOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,MAAM;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM,EAAE,SAAS;IACjE;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAU,SAAQ,SAAS;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,YAAY;IAC9D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAEjE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,MAAM,WAAW,oBAAqB,SACpC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC;IAC7G;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,oBAAoB,CAAA"}

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from './components/FieldGroup.js';
 export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
+export * from './components/ImageBox.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -20,6 +20,7 @@ export * from './components/FieldGroup.js';
 export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
+export * from './components/ImageBox.js';
 export * from './components/Input.js';
 export * from './components/layout.js';
 export * from './components/Link.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,yBAAyB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ImageBox.tsx

@@ -0,0 +1,80 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback } from 'react'
+import { useCitricController } from '../context/hooks'
+import { HTMLTag } from '../types'
+import { CitricComponent } from './CitricComponent'
+
+type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
+
+export interface BaseImageBoxProps<T extends ImageBoxTag> {
+  /**
+   * The HTML element to render.
+   * 
+   * @default 'div'
+   */
+  tag?: T,
+  /**
+   * The box appearance.
+   * 
+   * @default 'circle'
+   */
+  appearance?: 'circle' | 'square',
+  /**
+   * Size of the box.
+   * 
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg',
+  /**
+   * Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
+   */
+  feedback?: string,
+  /**
+   * Only valid if `tag` is "button" or "a".
+   * 
+   * Whether or not a click in this button/link should generate analytics data.
+   * 
+   * This only takes effect if there's a CitricController in React's context. The value of `analytics` is passed to the function
+   * `onClickButton/onClickLink` of the controller.
+   * 
+   * @default false
+   */
+  analytics?: boolean,
+}
+
+export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
+
+export function ImageBox<T extends ImageBoxTag = 'div'>(
+  { tag, appearance, size, className, analytics, onClick, feedback, ...props }: ImageBoxProps<T>,
+) {
+  const citric = useCitricController()
+
+  const handleClick = useCallback((e: React.MouseEvent<any>) => {
+    onClick?.(e)
+    if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
+    else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
+  }, [tag])
+
+  return <CitricComponent
+    tag={(tag || 'i') as any}
+    component="icon-box"
+    className={listToClass([appearance, size, className])}
+    data-feedback={feedback || undefined}
+    onClick={['button', 'a'].includes(tag ?? '') ? handleClick : onClick}
+    {...props}
+  />
+}
+
+/**
+ * Shortcut to `<ImageBox tag="button" />`
+ */
+export function ImageButton(props: Omit<ImageBoxProps<'button'>, 'tag'>) {
+  return ImageBox({ ...props, tag: 'button', type: props.type || 'button' })
+}
+
+/**
+ * Shortcut to `<ImageBox tag="a" />`
+ */
+export function ImageLink(props: Omit<ImageBoxProps<'a'>, 'tag'>) {
+  return ImageBox({ ...props, tag: 'a' })
+}

package/src/components/MenuOverlay/Menu.tsx

@@ -12,11 +12,12 @@ import { MenuAction, MenuCollapsible, MenuItem, MenuProps, MenuSection, MenuStat
 // Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
 const RENDER_DELAY = 20
 
-function Submenu({ children, label, className, icon, iconRight }: MenuCollapsible) {
+function Submenu({ children, label, className, icon, iconRight, style }: MenuCollapsible) {
   const controller = useMenuController()
   return (
     <button
       className={listToClass([className, 'submenu'])}
+      style={style}
       onClick={(e) => {
         e.stopPropagation()
         const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
@@ -37,9 +38,9 @@ function Submenu({ children, label, className, icon, iconRight }: MenuCollapsibl
   )
 }
 
-function MenuSection({ children, label, className }: MenuSection) {
+function MenuSection({ children, label, className, style }: MenuSection) {
   return (
-    <section className={className}>
+    <section className={className} style={style}>
       {label && <h6>{label}</h6>}
       <nav>
         <MenuItems items={children} />

package/src/components/MenuOverlay/types.ts

@@ -1,3 +1,4 @@
+import { WithStyle } from '@stack-spot/portal-theme'
 import { BaseOverlayProps } from '../Overlay/types'
 
 interface CustomLabel {
@@ -59,18 +60,14 @@ interface ItemWithIcon {
   iconRight?: React.ReactElement,
 }
 
-export interface MenuAction extends ItemWithIcon, Action {
+export interface MenuAction extends ItemWithIcon, Action, WithStyle {
   /**
    * Whether or not this option is currently active.
    */
   active?: boolean,
-  /**
-   * A class to be added to this item.
-   */
-  className?: string,
 }
 
-interface MenuGroup {
+interface MenuGroup extends WithStyle {
   /**
    * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
    */
@@ -79,10 +76,6 @@ interface MenuGroup {
    * The items of this group.
    */
   children: MenuItem[],
-  /**
-  * A class to be added to this item.
-  */
-  className?: string,
 }
 
 export interface MenuSection extends MenuGroup {

package/src/index.ts

@@ -20,6 +20,7 @@ export * from './components/FieldGroup'
 export * from './components/Form'
 export * from './components/FormGroup'
 export * from './components/IconBox'
+export * from './components/ImageBox'
 export * from './components/Input'
 export * from './components/layout'
 export * from './components/Link'