@stack-spot/citric-react 0.16.0 → 0.18.0

package/dist/citric.css

@@ -12,10 +12,12 @@
   }
   
   .text-code1 {
+    margin: 0;
     font: var(--font-code1);
   }
   
   .text-code2 {
+    margin: 0;
     font: var(--font-code2);
   }
   

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,mEAAoF,SAAS,4CAS5G,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,mEAAoF,SAAS,4CAU5G,CAAA"}

package/dist/components/Card.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children })));
+export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", onClick: onClick, className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children })));
 //# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjH,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjH,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}

package/dist/components/ImageWithFallback.d.ts

@@ -0,0 +1,8 @@
+import { WithStyleShortcuts } from '../types.js';
+export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+    fallback: React.ReactNode;
+    showLoading?: boolean;
+}
+export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps;
+export declare const ImageWithFallback: ({ onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageWithFallback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.d.ts","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI7C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,GAAG,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;IACvG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,0BAA0B,CAAA;AAE9F,eAAO,MAAM,iBAAiB,GAC5B,mGAAmG,sBAAsB,4CAgC1H,CAAA"}

package/dist/components/ImageWithFallback.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useEffect, useMemo, useState } from 'react';
+import { getStyleFromProps } from '../utils/css.js';
+import { Skeleton } from './Skeleton.js';
+export const ImageWithFallback = ({ onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }) => {
+    const [state, setState] = useState(props.src ? 'loading' : 'error');
+    const isLoading = state === 'loading' && showLoading;
+    const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg]);
+    function handleLoad(e) {
+        if (state === 'loading')
+            setState('ready');
+        onLoad?.(e);
+    }
+    function handleError(e) {
+        setState('error');
+        onError?.(e);
+    }
+    useEffect(() => {
+        if (state !== 'loading')
+            setState(props.src ? 'loading' : 'error');
+    }, [props.src]);
+    if (state === 'error')
+        return _jsx("div", { className: listToClass([className, 'center']), style: style, children: fallback });
+    return _jsxs(_Fragment, { children: [isLoading && _jsx(Skeleton, { className: className, style: style }), _jsx("img", { onLoad: handleLoad, onError: handleError, style: { ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }, "aria-hidden": isLoading, className: className, ...props })] });
+};
+//# sourceMappingURL=ImageWithFallback.js.map

package/dist/components/ImageWithFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWithFallback.js","sourceRoot":"","sources":["../../src/components/ImageWithFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AASrC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,EAA0B,EACzH,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,IAAI,WAAW,CAAA;IACpD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;IAEtH,SAAS,UAAU,CAAC,CAAgD;QAClE,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC1C,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IACb,CAAC;IAED,SAAS,WAAW,CAAC,CAAgD;QACnE,QAAQ,CAAC,OAAO,CAAC,CAAA;QACjB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;IACd,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS;YAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;IAEf,IAAI,KAAK,KAAK,OAAO;QAAE,OAAO,cAAK,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAO,CAAA;IAChH,OAAO,8BACJ,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,EAC9D,cACE,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,iBACzF,SAAS,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,IACD,CAAA;AACL,CAAC,CAAA"}

package/dist/components/layout.d.ts

@@ -32,15 +32,75 @@ export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<
 export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>;
 export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>;
 declare function _Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 declare function _Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 declare function _Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
-    style: Partial<import("react").CSSProperties>;
+    bg?: import("@stack-spot/portal-theme").ColorKey;
+    fg?: import("@stack-spot/portal-theme").ColorKey;
+    border?: import("@stack-spot/portal-theme").ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    mt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    ml?: import("@stack-spot/portal-theme").SpacingKey | string;
+    mr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
+    pt?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pb?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pl?: import("@stack-spot/portal-theme").SpacingKey | string;
+    pr?: import("@stack-spot/portal-theme").SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
     className: string;
 }, string | import("react").JSXElementConstructor<any>>;
 export declare const Center: typeof _Center;

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
 export * from './components/ImageBox.js';
+export * from './components/ImageWithFallback.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,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,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,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,gCAAgC,CAAA;AAC9C,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,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './components/Form.js';
 export * from './components/FormGroup.js';
 export * from './components/IconBox.js';
 export * from './components/ImageBox.js';
+export * from './components/ImageWithFallback.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,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,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,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,gCAAgC,CAAA;AAC9C,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,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/utils/css.d.ts

@@ -1,12 +1,34 @@
 import { ColorKey } from '@stack-spot/portal-theme';
+import { SpacingKey } from '@stack-spot/portal-theme/dist/definition.js';
 import { TextAppearance, WithStyleShortcuts } from '../types.js';
 export declare function colorNameToColorVariable(name: ColorKey): string;
 export declare function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined): import("react").CSSProperties | undefined;
 export declare function textAppearanceToClass(appearance: TextAppearance): string;
 export declare function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined): string;
 export declare function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any): import("react").CSSProperties | undefined;
-export declare function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }: WithStyleShortcuts & Record<string, any>): {
-    style: Partial<import("react").CSSProperties>;
+export declare function getStyleFromProps({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, }: WithStyleShortcuts): React.CSSProperties;
+export declare function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>): {
+    bg?: ColorKey;
+    fg?: ColorKey;
+    border?: ColorKey;
+    radius?: import("@stack-spot/portal-theme").RadiusKey;
+    m?: SpacingKey | SpacingKey[] | string;
+    mt?: SpacingKey | string;
+    mb?: SpacingKey | string;
+    ml?: SpacingKey | string;
+    mr?: SpacingKey | string;
+    p?: SpacingKey | SpacingKey[] | string;
+    pt?: SpacingKey | string;
+    pb?: SpacingKey | string;
+    pl?: SpacingKey | string;
+    pr?: SpacingKey | string;
+    w?: string | number;
+    h?: string | number;
+    flex?: React.CSSProperties["flex"];
+    justifyContent?: React.CSSProperties["justifyContent"];
+    alignItems?: React.CSSProperties["alignItems"];
+    gap?: React.CSSProperties["gap"];
+    style: any;
 };
 export declare function styleObjectToCssString(styleObject?: React.CSSProperties): string;
 //# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AAGvE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,WAAW,CACzB,EACE,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,EACD,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;EA8B5C;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAErE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,GACF,EAAE,kBAAkB,GAAG,KAAK,CAAC,aAAa,CA4B1C;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;EAGxF;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}

package/dist/utils/css.js

@@ -24,7 +24,7 @@ function spacingToStyle(spacing) {
         return theme.spacing[spacing];
     return spacing?.map(s => theme.spacing[s]).join(' ');
 }
-export function applyStyles({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, style, ...props }) {
+export function getStyleFromProps({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, }) {
     const [bgColor, bgLevel] = bg?.split('.') ?? [];
     const [fgColor, fgLevel] = fg?.split('.') ?? [];
     const [borderColor, borderLevel] = border?.split('.') ?? [];
@@ -50,23 +50,26 @@ export function applyStyles({ bg, fg, border, radius, justifyContent, alignItems
         paddingRight: spacingToStyle(pr),
         width: w,
         height: h,
-        ...style,
     };
-    return { style: omitBy(newStyle, v => v === undefined), ...props };
+    return omitBy(newStyle, v => v === undefined);
+}
+export function applyStyles({ style, ...props }) {
+    const newStyle = getStyleFromProps(props);
+    return { style: { ...newStyle, ...style }, ...props };
 }
 // AI generated
 export function styleObjectToCssString(styleObject = {}) {
     return Object.entries(styleObject)
         .map(([property, value]) => {
         // Convert camelCase to kebab-case
-        const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase();
         // Append 'px' to numeric values for common dimension properties
-        const cssValue = typeof value === "number" &&
+        const cssValue = typeof value === 'number' &&
             !['zIndex', 'opacity', 'fontWeight'].includes(property)
             ? `${value}px`
             : value;
         return `${cssProperty}: ${cssValue}`;
     })
-        .join("; ");
+        .join('; ');
 }
 //# sourceMappingURL=css.js.map

package/dist/utils/css.js.map

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

package/package.json

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

package/src/components/Card.tsx

@@ -31,6 +31,7 @@ export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, c
   <CitricComponent
     tag={tag}
     component="card"
+    onClick={onClick}
     className={listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className])}
     {...props}
   >

package/src/components/ImageWithFallback.tsx

@@ -0,0 +1,47 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useMemo, useState } from 'react'
+import { WithStyleShortcuts } from '../types'
+import { getStyleFromProps } from '../utils/css'
+import { Skeleton } from './Skeleton'
+
+export interface BaseImageWithFallbackProps extends Pick<WithStyleShortcuts, 'w' | 'h' | 'radius' | 'bg'> {
+  fallback: React.ReactNode,
+  showLoading?: boolean,
+}
+
+export type ImageWithFallbackProps = JSX.IntrinsicElements['img'] & BaseImageWithFallbackProps
+
+export const ImageWithFallback = (
+  { onLoad, onError, className, style: ogStyle, fallback, showLoading, w, h, radius, bg, ...props }: ImageWithFallbackProps,
+) => {
+  const [state, setState] = useState<'loading' | 'ready' | 'error'>(props.src ? 'loading' : 'error')
+  const isLoading = state === 'loading' && showLoading
+  const style = useMemo(() => ({ ...getStyleFromProps({ w, h, radius, bg }), ...ogStyle }), [ogStyle, w, h, radius, bg])
+
+  function handleLoad(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    if (state === 'loading') setState('ready')
+    onLoad?.(e)
+  }
+
+  function handleError(e: React.SyntheticEvent<HTMLImageElement, Event>) {
+    setState('error')
+    onError?.(e)
+  }
+
+  useEffect(() => {
+    if (state !== 'loading') setState(props.src ? 'loading' : 'error')
+  }, [props.src])
+
+  if (state === 'error') return <div className={listToClass([className, 'center'])} style={style}>{fallback}</div>
+  return <>
+    {isLoading && <Skeleton className={className} style={style} />}
+    <img
+      onLoad={handleLoad}
+      onError={handleError}
+      style={{ ...style, ...(isLoading ? { pointerEvents: 'none', position: 'absolute', opacity: 0 } : {}) }}
+      aria-hidden={isLoading}
+      className={className}
+      {...props}
+    />
+  </>
+}

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/Form'
 export * from './components/FormGroup'
 export * from './components/IconBox'
 export * from './components/ImageBox'
+export * from './components/ImageWithFallback'
 export * from './components/Input'
 export * from './components/layout'
 export * from './components/Link'
@@ -52,3 +53,4 @@ export type { CitricController } from './types'
 export * from './utils/checkbox'
 export * from './utils/radio'
 export * from './utils/ValueController'
+

package/src/utils/css.ts

@@ -30,37 +30,33 @@ function spacingToStyle(spacing: SpacingKey | SpacingKey[] | string | undefined)
   return spacing?.map(s => theme.spacing[s]).join(' ')
 }
 
-export function applyStyles(
-  {
-    bg,
-    fg,
-    border,
-    radius,
-    justifyContent,
-    alignItems,
-    flex,
-    gap,
-    m,
-    mt,
-    mb,
-    ml,
-    mr,
-    p,
-    pt,
-    pb,
-    pl,
-    pr,
-    w,
-    h,
-    style,
-    ...props
-  }: WithStyleShortcuts & Record<string, any>,
-) {
+export function getStyleFromProps({
+  bg,
+  fg,
+  border,
+  radius,
+  justifyContent,
+  alignItems,
+  flex,
+  gap,
+  m,
+  mt,
+  mb,
+  ml,
+  mr,
+  p,
+  pt,
+  pb,
+  pl,
+  pr,
+  w,
+  h,
+}: WithStyleShortcuts): React.CSSProperties {
   const [bgColor, bgLevel] = bg?.split('.') ?? []
   const [fgColor, fgLevel] = fg?.split('.') ?? []
   const [borderColor, borderLevel] = border?.split('.') ?? []
   const borderColorVar = (theme.color as any)[borderColor]?.[borderLevel]
-  const newStyle: React.CSSProperties = {
+  const newStyle: React.CSSProperties =  {
     backgroundColor: (theme.color as any)[bgColor]?.[bgLevel],
     color: (theme.color as any)[fgColor]?.[fgLevel],
     border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
@@ -81,9 +77,13 @@ export function applyStyles(
     paddingRight: spacingToStyle(pr),
     width: w,
     height: h,
-    ...style,
   }
-  return { style: omitBy(newStyle, v => v === undefined), ...props }
+  return omitBy(newStyle, v => v === undefined)
+}
+
+export function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>) {
+  const newStyle = getStyleFromProps(props)
+  return { style: { ...newStyle, ...style }, ...props }
 }
 
 // AI generated
@@ -91,16 +91,16 @@ export function styleObjectToCssString(styleObject: React.CSSProperties = {}) {
   return Object.entries(styleObject)
     .map(([property, value]) => {
       // Convert camelCase to kebab-case
-      const cssProperty = property.replace(/([A-Z])/g, "-$1").toLowerCase()
+      const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
 
       // Append 'px' to numeric values for common dimension properties
       const cssValue =
-        typeof value === "number" &&
+        typeof value === 'number' &&
         !['zIndex', 'opacity', 'fontWeight'].includes(property)
           ? `${value}px`
           : value
 
       return `${cssProperty}: ${cssValue}`
     })
-    .join("; ")
+    .join('; ')
 }