@cleartrip/ct-design-dotted-loader 4.0.0 → 5.0.0

package/src/style.ts

@@ -0,0 +1,54 @@
+import { keyframes } from '@emotion/css';
+
+import type { Theme } from '@cleartrip/ct-design-theme';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { LoaderVariant } from './type';
+
+/**
+ * Resolves the dot dimension based on the `variant` prop. Mirrors the
+ * aldenui behaviour: `large` → theme.size[3], `medium` → theme.size[2],
+ * `small` (default) → theme.size[1].
+ */
+export function getLoaderDimension(size: LoaderVariant | undefined, theme: Theme) {
+  switch (size) {
+    case 'large':
+      return theme.size[3];
+    case 'medium':
+      return theme.size[2];
+    default:
+      return theme.size[1];
+  }
+}
+
+/**
+ * Produces a stable emotion keyframe animation name for the given
+ * colour pair. Each unique `(color1, color2)` combination is cached by
+ * emotion so repeated calls with the same theme share a single
+ * declaration.
+ */
+export const dotAnimationKeyframe = ({ color1, color2 }: { color1: string; color2: string }) => keyframes`
+  0% { background-color: ${color1}; transform: scale(1); }
+  50% { background-color: ${color2}; transform: scale(1.2); }
+  100% { background-color: ${color1}; transform: scale(1); }
+`;
+
+/**
+ * Static styles shared by both web and native implementations. Dot
+ * radius and wrapper layout are pure theme lookups; dynamic values
+ * (size, colour, animation) are applied on top per-render.
+ */
+const staticLoaderStyles = makeStyles((theme) => ({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    columnGap: 8,
+  },
+  dot: {
+    borderRadius: theme.border.radius[32],
+    backgroundColor: theme.color.background.defaultDark,
+  },
+}));
+
+export default staticLoaderStyles;

package/src/type.ts

@@ -0,0 +1,82 @@
+import type { CSSProperties } from 'react';
+
+import type { Styles } from '@cleartrip/ct-design-types';
+
+/**
+ * Enum of supported DottedLoader sizes. Consumers typically use the
+ * `LoaderVariant` string-literal form.
+ */
+import { DottedLoaderSize } from './constants';
+
+export type LoaderVariant = `${DottedLoaderSize}`;
+
+/**
+ * `styleConfig` shape for DottedLoader. Exposes slots for the outer
+ * wrapper (`root`) and the individual dot (`loaderCont`).
+ */
+export interface IDottedLoaderStyleConfig {
+  /**
+   * Styles applied to the outer loader container.
+   */
+  root?: Styles[];
+
+  /**
+   * Styles applied to each dot element.
+   */
+  loaderCont?: Styles[];
+}
+
+/**
+ * Props for the DottedLoader component.
+ */
+export interface IDottedLoaderProps {
+  /**
+   * Size variant for the loader dots. Defaults to `'medium'`.
+   */
+  variant?: LoaderVariant;
+
+  /**
+   * `styleConfig` slots for fine-grained style overrides.
+   */
+  styleConfig?: IDottedLoaderStyleConfig;
+
+  // ---------------------------------------------------------------------
+  // Deprecated / legacy escape hatches retained for backward compatibility.
+  // ---------------------------------------------------------------------
+
+  /**
+   * @deprecated Use `styleConfig.root` instead. Still appended last so
+   * existing overrides continue to win on web.
+   */
+  css?: CSSProperties;
+}
+
+/**
+ * Props for the single-dot sub-component.
+ */
+export interface IDotStyleConfig {
+  /**
+   * Styles applied to the dot element.
+   */
+  root?: Styles[];
+}
+
+export interface IDot {
+  /**
+   * Zero-indexed position of the dot within the loader. Drives the
+   * staggered animation delay.
+   */
+  dotId: number;
+
+  /**
+   * Size variant inherited from the parent loader.
+   */
+  variant?: LoaderVariant;
+
+  /**
+   * Per-dot style overrides.
+   */
+  styleConfig?: IDotStyleConfig;
+}
+
+export type DottedLoaderProps = IDottedLoaderProps;