@aloudata/aloudata-design 3.0.0-beta.15 → 3.0.0-beta.16

package/dist/Tour/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Tour/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Button from '../Button';\nimport { cn } from '../lib/utils';\n\nexport interface TourStepProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cover?: React.ReactNode;\n  target?: (() => HTMLElement | null) | null;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight';\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  nextButtonProps?: { children?: React.ReactNode };\n  prevButtonProps?: { children?: React.ReactNode };\n}\n\nexport interface TourProps {\n  open?: boolean;\n  onClose?: () => void;\n  steps?: TourStepProps[];\n  current?: number;\n  onChange?: (current: number) => void;\n  mask?: boolean;\n  type?: 'default' | 'primary';\n  className?: string;\n  onFinish?: () => void;\n}\n\nfunction Tour(props: TourProps) {\n  const {\n    open = false,\n    onClose,\n    steps = [],\n    current: controlledCurrent,\n    onChange,\n    mask = true,\n    className,\n    onFinish,\n  } = props;\n\n  const [innerCurrent, setInnerCurrent] = useState(0);\n  const current = controlledCurrent ?? innerCurrent;\n\n  useEffect(() => {\n    if (!open) setInnerCurrent(0);\n  }, [open]);\n\n  if (!open || steps.length === 0) return null;\n\n  const step = steps[current];\n  const isLast = current === steps.length - 1;\n\n  const goNext = () => {\n    if (isLast) {\n      onFinish?.();\n      onClose?.();\n    } else {\n      const next = current + 1;\n      if (controlledCurrent === undefined) setInnerCurrent(next);\n      onChange?.(next);\n    }\n  };\n\n  const goPrev = () => {\n    const prev = Math.max(0, current - 1);\n    if (controlledCurrent === undefined) setInnerCurrent(prev);\n    onChange?.(prev);\n  };\n\n  return (\n    <>\n      {mask && (\n        <div\n          className=\"ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45\"\n          onClick={onClose}\n        />\n      )}\n      <div\n        className={cn(\n          'ald-tour tw-fixed tw-z-[1001] tw-max-w-sm tw-rounded-r-100 tw-bg-[var(--background-default)] tw-p-6 tw-shadow-xl',\n          'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n      >\n        {step?.cover && (\n          <div className=\"ald-tour-cover tw-mb-4\">{step.cover}</div>\n        )}\n        {step?.title && (\n          <div className=\"ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n            {step.title}\n          </div>\n        )}\n        {step?.description && (\n          <div className=\"ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]\">\n            {step.description}\n          </div>\n        )}\n        <div className=\"ald-tour-footer tw-flex tw-items-center tw-justify-between\">\n          <span className=\"tw-text-xs tw-text-[var(--content-tertiary)]\">\n            {current + 1}/{steps.length}\n          </span>\n          <div className=\"tw-flex tw-gap-2\">\n            {current > 0 && (\n              <Button type=\"secondary\" size=\"small\" onClick={goPrev}>\n                {step?.prevButtonProps?.children || 'Prev'}\n              </Button>\n            )}\n            <Button type=\"primary\" size=\"small\" onClick={goNext}>\n              {step?.nextButtonProps?.children || (isLast ? 'Finish' : 'Next')}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport default Tour;\n"],"mappings":";;;;;AAqCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OAAO,OACP,SACA,QAAQ,EAAE,EACV,SAAS,mBACT,UACA,OAAO,MACP,WACA,aACE;CAEJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,UAAU,qBAAqB;AAErC,iBAAgB;AACd,MAAI,CAAC,KAAM,iBAAgB,EAAE;IAC5B,CAAC,KAAK,CAAC;AAEV,KAAI,CAAC,QAAQ,MAAM,WAAW,EAAG,QAAO;CAExC,MAAM,OAAO,MAAM;CACnB,MAAM,SAAS,YAAY,MAAM,SAAS;CAE1C,MAAM,eAAe;AACnB,MAAI,QAAQ;AACV,eAAY;AACZ,cAAW;SACN;GACL,MAAM,OAAO,UAAU;AACvB,OAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,cAAW,KAAK;;;CAIpB,MAAM,eAAe;EACnB,MAAM,OAAO,KAAK,IAAI,GAAG,UAAU,EAAE;AACrC,MAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,aAAW,KAAK;;AAGlB,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,CAAA,EAEJ,qBAAC,OAAD;EACE,WAAW,GACT,oHACA,kEACA,UACD;YALH;GAOG,MAAM,SACL,oBAAC,OAAD;IAAK,WAAU;cAA0B,KAAK;IAAY,CAAA;GAE3D,MAAM,SACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK;IACF,CAAA;GAEP,MAAM,eACL,oBAAC,OAAD;IAAK,WAAU;cACZ,KAAK;IACF,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,UAAU;MAAE;MAAE,MAAM;MAChB;QACP,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,UAAU,KACT,oBAAC,gBAAD;MAAQ,MAAK;MAAY,MAAK;MAAQ,SAAS;gBAC5C,MAAM,iBAAiB,YAAY;MAC7B,CAAA,EAEX,oBAAC,gBAAD;MAAQ,MAAK;MAAU,MAAK;MAAQ,SAAS;gBAC1C,MAAM,iBAAiB,aAAa,SAAS,WAAW;MAClD,CAAA,CACL;OACF;;GACF;IACL,EAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Tour/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Button from '../Button';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface TourStepProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  cover?: React.ReactNode;\n  target?: (() => HTMLElement | null) | null;\n  placement?:\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight';\n  mask?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  nextButtonProps?: { children?: React.ReactNode };\n  prevButtonProps?: { children?: React.ReactNode };\n}\n\nexport interface TourProps {\n  open?: boolean;\n  onClose?: () => void;\n  steps?: TourStepProps[];\n  current?: number;\n  onChange?: (current: number) => void;\n  mask?: boolean;\n  type?: 'default' | 'primary';\n  className?: string;\n  onFinish?: () => void;\n}\n\nfunction Tour(props: TourProps) {\n  const {\n    open = false,\n    onClose,\n    steps = [],\n    current: controlledCurrent,\n    onChange,\n    mask = true,\n    className,\n    onFinish,\n  } = props;\n\n  const [innerCurrent, setInnerCurrent] = useState(0);\n  const current = controlledCurrent ?? innerCurrent;\n\n  useEffect(() => {\n    if (!open) setInnerCurrent(0);\n  }, [open]);\n\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer();\n\n  if (!open || steps.length === 0) return null;\n\n  const step = steps[current];\n  const isLast = current === steps.length - 1;\n\n  const goNext = () => {\n    if (isLast) {\n      onFinish?.();\n      onClose?.();\n    } else {\n      const next = current + 1;\n      if (controlledCurrent === undefined) setInnerCurrent(next);\n      onChange?.(next);\n    }\n  };\n\n  const goPrev = () => {\n    const prev = Math.max(0, current - 1);\n    if (controlledCurrent === undefined) setInnerCurrent(prev);\n    onChange?.(prev);\n  };\n\n  return (\n    <>\n      {mask && (\n        <div\n          className=\"ald-tour-mask tw-fixed tw-inset-0 tw-z-[1000] tw-bg-black/45\"\n          style={{ zIndex: maskZIndex }}\n          onClick={onClose}\n        />\n      )}\n      <div\n        className={cn(\n          'ald-tour tw-fixed tw-z-[1001] tw-max-w-sm tw-rounded-r-100 tw-bg-[var(--background-default)] tw-p-6 tw-shadow-xl',\n          'tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2',\n          className,\n        )}\n        style={{ zIndex: contentZIndex, ...step?.style }}\n      >\n        <FloatingLayerProvider value={nextLevel}>\n          {step?.cover && (\n            <div className=\"ald-tour-cover tw-mb-4\">{step.cover}</div>\n          )}\n          {step?.title && (\n            <div className=\"ald-tour-title tw-mb-2 tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n              {step.title}\n            </div>\n          )}\n          {step?.description && (\n            <div className=\"ald-tour-description tw-mb-4 tw-text-sm tw-text-[var(--content-secondary)]\">\n              {step.description}\n            </div>\n          )}\n          <div className=\"ald-tour-footer tw-flex tw-items-center tw-justify-between\">\n            <span className=\"tw-text-xs tw-text-[var(--content-tertiary)]\">\n              {current + 1}/{steps.length}\n            </span>\n            <div className=\"tw-flex tw-gap-2\">\n              {current > 0 && (\n                <Button type=\"secondary\" size=\"small\" onClick={goPrev}>\n                  {step?.prevButtonProps?.children || 'Prev'}\n                </Button>\n              )}\n              <Button type=\"primary\" size=\"small\" onClick={goNext}>\n                {step?.nextButtonProps?.children ||\n                  (isLast ? 'Finish' : 'Next')}\n              </Button>\n            </div>\n          </div>\n        </FloatingLayerProvider>\n      </div>\n    </>\n  );\n}\n\nexport default Tour;\n"],"mappings":";;;;;;AAyCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OAAO,OACP,SACA,QAAQ,EAAE,EACV,SAAS,mBACT,UACA,OAAO,MACP,WACA,aACE;CAEJ,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,UAAU,qBAAqB;AAErC,iBAAgB;AACd,MAAI,CAAC,KAAM,iBAAgB,EAAE;IAC5B,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,YAAY,eAAe,cAAc,kBAAkB;AAEnE,KAAI,CAAC,QAAQ,MAAM,WAAW,EAAG,QAAO;CAExC,MAAM,OAAO,MAAM;CACnB,MAAM,SAAS,YAAY,MAAM,SAAS;CAE1C,MAAM,eAAe;AACnB,MAAI,QAAQ;AACV,eAAY;AACZ,cAAW;SACN;GACL,MAAM,OAAO,UAAU;AACvB,OAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,cAAW,KAAK;;;CAIpB,MAAM,eAAe;EACnB,MAAM,OAAO,KAAK,IAAI,GAAG,UAAU,EAAE;AACrC,MAAI,sBAAsB,OAAW,iBAAgB,KAAK;AAC1D,aAAW,KAAK;;AAGlB,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,QAAQ,YAAY;EAC7B,SAAS;EACT,CAAA,EAEJ,oBAAC,OAAD;EACE,WAAW,GACT,oHACA,kEACA,UACD;EACD,OAAO;GAAE,QAAQ;GAAe,GAAG,MAAM;GAAO;YAEhD,qBAAC,uBAAD;GAAuB,OAAO;aAA9B;IACG,MAAM,SACL,oBAAC,OAAD;KAAK,WAAU;eAA0B,KAAK;KAAY,CAAA;IAE3D,MAAM,SACL,oBAAC,OAAD;KAAK,WAAU;eACZ,KAAK;KACF,CAAA;IAEP,MAAM,eACL,oBAAC,OAAD;KAAK,WAAU;eACZ,KAAK;KACF,CAAA;IAER,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,UAAU;OAAE;OAAE,MAAM;OAChB;SACP,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,UAAU,KACT,oBAAC,gBAAD;OAAQ,MAAK;OAAY,MAAK;OAAQ,SAAS;iBAC5C,MAAM,iBAAiB,YAAY;OAC7B,CAAA,EAEX,oBAAC,gBAAD;OAAQ,MAAK;OAAU,MAAK;OAAQ,SAAS;iBAC1C,MAAM,iBAAiB,aACrB,SAAS,WAAW;OAChB,CAAA,CACL;QACF;;IACgB;;EACpB,CAAA,CACL,EAAA,CAAA"}

package/dist/_utils/floatingLayer.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export declare const FLOATING_LAYER_BASE_Z_INDEX = 1000;
+export declare const FLOATING_LAYER_STEP = 10;
+export declare function useFloatingLayer(baseZIndex?: number): {
+    level: number;
+    maskZIndex: number;
+    contentZIndex: number;
+    popupZIndex: number;
+    nextLevel: number;
+};
+export declare function useFloatingPopupZIndex(zIndex?: number): number;
+export declare function FloatingLayerProvider({ children, value, }: {
+    children: React.ReactNode;
+    value: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/_utils/floatingLayer.js

@@ -0,0 +1,30 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/_utils/floatingLayer.tsx
+var FLOATING_LAYER_BASE_Z_INDEX = 1e3;
+var FloatingLayerContext = createContext(0);
+function useFloatingLayer(baseZIndex = FLOATING_LAYER_BASE_Z_INDEX) {
+	const level = useContext(FloatingLayerContext);
+	const maskZIndex = baseZIndex + level * 10;
+	return {
+		level,
+		maskZIndex,
+		contentZIndex: maskZIndex + 1,
+		popupZIndex: maskZIndex + 2,
+		nextLevel: level + 1
+	};
+}
+function useFloatingPopupZIndex(zIndex) {
+	const { popupZIndex } = useFloatingLayer();
+	return zIndex ?? popupZIndex;
+}
+function FloatingLayerProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+export { FloatingLayerProvider, useFloatingLayer, useFloatingPopupZIndex };
+
+//# sourceMappingURL=floatingLayer.js.map

package/dist/_utils/floatingLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingLayer.js","names":[],"sources":["../../src/_utils/floatingLayer.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nexport const FLOATING_LAYER_BASE_Z_INDEX = 1000;\nexport const FLOATING_LAYER_STEP = 10;\n\nconst FloatingLayerContext = createContext(0);\n\nexport function useFloatingLayer(baseZIndex = FLOATING_LAYER_BASE_Z_INDEX) {\n  const level = useContext(FloatingLayerContext);\n  const maskZIndex = baseZIndex + level * FLOATING_LAYER_STEP;\n\n  return {\n    level,\n    maskZIndex,\n    contentZIndex: maskZIndex + 1,\n    popupZIndex: maskZIndex + 2,\n    nextLevel: level + 1,\n  };\n}\n\nexport function useFloatingPopupZIndex(zIndex?: number) {\n  const { popupZIndex } = useFloatingLayer();\n  return zIndex ?? popupZIndex;\n}\n\nexport function FloatingLayerProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: number;\n}) {\n  return (\n    <FloatingLayerContext.Provider value={value}>\n      {children}\n    </FloatingLayerContext.Provider>\n  );\n}\n"],"mappings":";;;AAEA,IAAa,8BAA8B;AAG3C,IAAM,uBAAuB,cAAc,EAAE;AAE7C,SAAgB,iBAAiB,aAAa,6BAA6B;CACzE,MAAM,QAAQ,WAAW,qBAAqB;CAC9C,MAAM,aAAa,aAAa,QAAA;AAEhC,QAAO;EACL;EACA;EACA,eAAe,aAAa;EAC5B,aAAa,aAAa;EAC1B,WAAW,QAAQ;EACpB;;AAGH,SAAgB,uBAAuB,QAAiB;CACtD,MAAM,EAAE,gBAAgB,kBAAkB;AAC1C,QAAO,UAAU;;AAGnB,SAAgB,sBAAsB,EACpC,UACA,SAIC;AACD,QACE,oBAAC,qBAAqB,UAAtB;EAAsC;EACnC;EAC6B,CAAA"}