@xfers/design-system 4.4.2-dev.c436f25f40 → 4.4.2-dev.cbabfc907c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfers/design-system",
-  "version": "4.4.2-dev.c436f25f40",
+  "version": "4.4.2-dev.cbabfc907c",
   "description": "StraitsX design system",
   "keywords": [
     "xfers",

package/dist/components/Coachmark/getJoyrideConfig.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCoachmarkJoyrideConfig = getCoachmarkJoyrideConfig;
-var theme_1 = require("src/theme/theme");
-/**
- * Get the default Joyride configuration for Coachmark component.
- * This includes the arrow styling that matches the Coachmark design.
- *
- * @param options - Optional configuration overrides
- * @returns Joyride configuration object with floaterProps and styles
- *
- * @example
- * ```tsx
- * import { Coachmark, getCoachmarkJoyrideConfig } from '@xfers/design-system'
- * import Joyride from 'react-joyride'
- *
- * <Joyride
- *   tooltipComponent={Coachmark}
- *   {...getCoachmarkJoyrideConfig()}
- * />
- * ```
- */
-function getCoachmarkJoyrideConfig(options) {
-    var _a = options || {}, _b = _a.arrowColor, arrowColor = _b === void 0 ? theme_1.straitsXTheme.color.surface.secondaryNeutral : _b, _c = _a.arrowLength, arrowLength = _c === void 0 ? 8 : _c, _d = _a.arrowSpread, arrowSpread = _d === void 0 ? 16 : _d;
-    return {
-        floaterProps: {
-            styles: {
-                arrow: {
-                    length: arrowLength,
-                    spread: arrowSpread,
-                    color: arrowColor,
-                },
-            },
-        },
-    };
-}
-//# sourceMappingURL=getJoyrideConfig.js.map

package/dist/components/Coachmark/getJoyrideConfig.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getJoyrideConfig.js","sourceRoot":"","sources":["../../../src/components/Coachmark/getJoyrideConfig.ts"],"names":[],"mappings":";;AAoBA,8DAsBC;AA1CD,yCAA+C;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,yBAAyB,CAAC,OAIzC;IACO,IAAA,KAIF,OAAO,IAAI,EAAE,EAHf,kBAAyD,EAAzD,UAAU,mBAAG,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAA,EACzD,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KACD,CAAA;IAEjB,OAAO;QACL,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,MAAM,EAAE,WAAW;oBACnB,MAAM,EAAE,WAAW;oBACnB,KAAK,EAAE,UAAU;iBAClB;aACF;SACF;KACF,CAAA;AACH,CAAC"}

package/dist/components/Coachmark/index.js

@@ -1,64 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Coachmark;
-var styled_1 = require("@emotion/styled");
-var react_1 = require("react");
-var Typography_1 = require("src/constants/Typography/Typography");
-var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
-var theme_1 = require("src/theme/theme");
-var Link_1 = require("../Link");
-function Coachmark(_a) {
-    var index = _a.index, primaryProps = _a.primaryProps, size = _a.size, step = _a.step, tooltipProps = _a.tooltipProps, backProps = _a.backProps, closeProps = _a.closeProps;
-    var title = step.title, content = step.content, data = step.data;
-    return (react_1.default.createElement(Container, __assign({}, tooltipProps),
-        react_1.default.createElement(TextContainer, null,
-            react_1.default.createElement(Header, null,
-                react_1.default.createElement(Typography_1.Typography.Label, { size: "md" }, title),
-                react_1.default.createElement(SkipAction, { role: closeProps.role, onClick: function () { return closeProps.onClick({}); } },
-                    react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: "m" }))),
-            react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, content)),
-        react_1.default.createElement(Footer, null,
-            react_1.default.createElement(Dots, null, Array.from({ length: size }, function (_, i) {
-                if (index === 0 && (data === null || data === void 0 ? void 0 : data.skipZeroIndex) === true) {
-                    return react_1.default.createElement(react_1.default.Fragment, null);
-                }
-                return react_1.default.createElement(Dot, { key: i, isActive: i === index });
-            })),
-            react_1.default.createElement(ButtonContainer, null,
-                backProps && (react_1.default.createElement(BackButton, { typographyType: "label", size: "md", role: backProps.role, onClick: function () { return backProps.onClick({}); }, isDisabled: index === 0, isUnderlined: false }, "Back")),
-                react_1.default.createElement(Link_1.default, { typographyType: "label", size: "md", role: primaryProps.role, onClick: function () { return primaryProps.onClick({}); }, isUnderlined: false }, "Next")))));
-}
-var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 12px;\n  min-width: 200px;\n  max-width: 260px;\n"], ["\n  background-color: ", ";\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 12px;\n  min-width: 200px;\n  max-width: 260px;\n"])), theme_1.straitsXTheme.color.surface.secondaryNeutral);
-var TextContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: ", ";\n"])), theme_1.straitsXTheme.color.base.onNeutral);
-var Header = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var SkipAction = (0, styled_1.default)(Link_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: none !important;\n"], ["\n  text-decoration: none !important;\n"])));
-var Footer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var Dots = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n"])));
-var Dot = styled_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
-    return props.isActive
-        ? "".concat(theme_1.straitsXTheme.color.base.primary3)
-        : "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface);
-});
-var BackButton = (0, styled_1.default)(Link_1.default)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  h5 {\n    color: ", ";\n  }\n  pointer-events: ", ";\n"], ["\n  h5 {\n    color: ", ";\n  }\n  pointer-events: ", ";\n"])), function (props) {
-    return props.isDisabled
-        ? "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface)
-        : "".concat(theme_1.straitsXTheme.color.base.link);
-}, function (props) { return (props.isDisabled ? 'none' : 'auto'); });
-var ButtonContainer = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
-//# sourceMappingURL=index.js.map

package/dist/components/Coachmark/index.js.map

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

package/dist/types/components/Coachmark/getJoyrideConfig.d.ts

@@ -1,33 +0,0 @@
-/**
- * Get the default Joyride configuration for Coachmark component.
- * This includes the arrow styling that matches the Coachmark design.
- *
- * @param options - Optional configuration overrides
- * @returns Joyride configuration object with floaterProps and styles
- *
- * @example
- * ```tsx
- * import { Coachmark, getCoachmarkJoyrideConfig } from '@xfers/design-system'
- * import Joyride from 'react-joyride'
- *
- * <Joyride
- *   tooltipComponent={Coachmark}
- *   {...getCoachmarkJoyrideConfig()}
- * />
- * ```
- */
-export declare function getCoachmarkJoyrideConfig(options?: {
-    arrowColor?: string;
-    arrowLength?: number;
-    arrowSpread?: number;
-}): {
-    floaterProps: {
-        styles: {
-            arrow: {
-                length: number;
-                spread: number;
-                color: string;
-            };
-        };
-    };
-};

package/dist/types/components/Coachmark/index.d.ts

@@ -1,49 +0,0 @@
-import React, { ReactNode, MouseEventHandler, RefCallback } from 'react';
-type CoachmarkProps = {
-    continuous: boolean;
-    index: number;
-    isLastStep: boolean;
-    size: number;
-    step: {
-        title?: ReactNode;
-        content: ReactNode;
-        data?: {
-            skipZeroIndex?: boolean;
-        };
-    };
-    backProps: {
-        'aria-label': string;
-        'data-action': string;
-        onClick: MouseEventHandler<HTMLElement>;
-        role: string;
-        title: string;
-    };
-    closeProps: {
-        'aria-label': string;
-        'data-action': string;
-        onClick: MouseEventHandler<HTMLElement>;
-        role: string;
-        title: string;
-    };
-    primaryProps: {
-        'aria-label': string;
-        'data-action': string;
-        onClick: MouseEventHandler<HTMLElement>;
-        role: string;
-        title: string;
-    };
-    skipProps: {
-        'aria-label': string;
-        'data-action': string;
-        onClick: MouseEventHandler<HTMLElement>;
-        role: string;
-        title: string;
-    };
-    tooltipProps: {
-        'aria-modal': boolean;
-        ref: RefCallback<HTMLElement>;
-        role: string;
-    };
-};
-export default function Coachmark({ index, primaryProps, size, step, tooltipProps, backProps, closeProps, }: CoachmarkProps): React.JSX.Element;
-export {};