sprintify-ui 0.10.65 → 0.10.66

package/src/utils/colors.ts

@@ -1,239 +1,239 @@
-import { darken, getContrast, lighten } from 'color2k';
-import defaultColors from 'tailwindcss/colors';
-
-const colors = defaultColors;
-
-export { colors };
-
-interface ColorConfig {
-  backgroundColor: string;
-  textColor: string;
-  borderColor: string;
-  color: string;
-}
-
-interface ColorPalette {
-  low: ColorConfig;
-  high: ColorConfig;
-}
-
-export const palette: Record<string, ColorPalette> = {
-  black: {
-    low: {
-      backgroundColor: colors.slate[200],
-      textColor: colors.slate[800],
-      borderColor: colors.slate[300],
-      color: colors.black,
-    },
-    high: {
-      backgroundColor: colors.black,
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.black,
-    },
-  },
-  gray: {
-    low: {
-      backgroundColor: colors.slate[200],
-      textColor: colors.slate[800],
-      borderColor: colors.slate[300],
-      color: colors.slate[500],
-    },
-    high: {
-      backgroundColor: colors.slate[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.slate[500],
-    },
-  },
-  red: {
-    low: {
-      backgroundColor: colors.red[100],
-      textColor: colors.red[800],
-      borderColor: colors.red[300],
-      color: colors.red[500],
-    },
-    high: {
-      backgroundColor: colors.red[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.red[500],
-    },
-  },
-  orange: {
-    low: {
-      backgroundColor: colors.orange[100],
-      textColor: colors.orange[800],
-      borderColor: colors.orange[300],
-      color: colors.orange[500],
-    },
-    high: {
-      backgroundColor: colors.orange[500],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.orange[500],
-    },
-  },
-  yellow: {
-    low: {
-      backgroundColor: colors.yellow[100],
-      textColor: colors.yellow[950],
-      borderColor: colors.yellow[300],
-      color: colors.yellow[500],
-    },
-    high: {
-      backgroundColor: colors.yellow[500],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.yellow[500],
-    },
-  },
-  green: {
-    low: {
-      backgroundColor: colors.green[100],
-      textColor: colors.green[800],
-      borderColor: colors.green[300],
-      color: colors.green[500],
-    },
-    high: {
-      backgroundColor: colors.green[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.green[500],
-    },
-  },
-  teal: {
-    low: {
-      backgroundColor: colors.teal[100],
-      textColor: colors.teal[800],
-      borderColor: colors.teal[300],
-      color: colors.teal[500],
-    },
-    high: {
-      backgroundColor: colors.teal[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.teal[500],
-    },
-  },
-  cyan: {
-    low: {
-      backgroundColor: colors.cyan[100],
-      textColor: colors.cyan[800],
-      borderColor: colors.cyan[300],
-      color: colors.cyan[500],
-    },
-    high: {
-      backgroundColor: colors.cyan[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.cyan[500],
-    },
-  },
-  blue: {
-    low: {
-      backgroundColor: colors.blue[100],
-      textColor: colors.blue[800],
-      borderColor: colors.blue[300],
-      color: colors.blue[500],
-    },
-    high: {
-      backgroundColor: colors.blue[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.blue[500],
-    },
-  },
-  indigo: {
-    low: {
-      backgroundColor: colors.indigo[100],
-      textColor: colors.indigo[800],
-      borderColor: colors.indigo[300],
-      color: colors.indigo[500],
-    },
-    high: {
-      backgroundColor: colors.indigo[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.indigo[500],
-    },
-  },
-  purple: {
-    low: {
-      backgroundColor: colors.purple[100],
-      textColor: colors.purple[800],
-      borderColor: colors.purple[300],
-      color: colors.purple[500],
-    },
-    high: {
-      backgroundColor: colors.purple[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.purple[500],
-    },
-  },
-  pink: {
-    low: {
-      backgroundColor: colors.pink[100],
-      textColor: colors.pink[800],
-      borderColor: colors.pink[300],
-      color: colors.pink[500],
-    },
-    high: {
-      backgroundColor: colors.pink[600],
-      textColor: colors.white,
-      borderColor: 'transparent',
-      color: colors.pink[500],
-    },
-  },
-  white: {
-    low: {
-      backgroundColor: colors.white,
-      textColor: colors.slate[600],
-      borderColor: 'transparent',
-      color: colors.slate[100],
-    },
-    high: {
-      backgroundColor: colors.white,
-      textColor: colors.black,
-      borderColor: 'transparent',
-      color: colors.slate[100],
-    },
-  },
-};
-
-const colorNames = {
-  info: 'blue',
-  success: 'green',
-  warning: 'yellow',
-  danger: 'red',
-  error: 'red',
-} as Record<string, string>;
-
-export function getColorConfig(color: string, contrast = false): ColorConfig {
-
-  color = colorNames[color] || color;
-
-  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
-
-  if (colorConfig) {
-    return colorConfig;
-  }
-
-  const c = getContrast(color, 'white');
-
-  let borderColor = 'transparent';
-  let textColor = 'white';
-
-  if (c < 2) {
-    textColor = darken(color, 0.5);
-    borderColor = darken(color, 0.1);
-  }
-
-  return {
-    backgroundColor: color,
-    textColor: textColor,
-    borderColor: borderColor,
-    color: color
-  };
-}
+import { darken, getContrast, lighten } from 'color2k';
+import defaultColors from 'tailwindcss/colors';
+
+const colors = defaultColors;
+
+export { colors };
+
+interface ColorConfig {
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+  color: string;
+}
+
+interface ColorPalette {
+  low: ColorConfig;
+  high: ColorConfig;
+}
+
+export const palette: Record<string, ColorPalette> = {
+  black: {
+    low: {
+      backgroundColor: colors.slate[200],
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
+      color: colors.black,
+    },
+    high: {
+      backgroundColor: colors.black,
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.black,
+    },
+  },
+  gray: {
+    low: {
+      backgroundColor: colors.slate[200],
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
+      color: colors.slate[500],
+    },
+    high: {
+      backgroundColor: colors.slate[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.slate[500],
+    },
+  },
+  red: {
+    low: {
+      backgroundColor: colors.red[100],
+      textColor: colors.red[800],
+      borderColor: colors.red[300],
+      color: colors.red[500],
+    },
+    high: {
+      backgroundColor: colors.red[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.red[500],
+    },
+  },
+  orange: {
+    low: {
+      backgroundColor: colors.orange[100],
+      textColor: colors.orange[800],
+      borderColor: colors.orange[300],
+      color: colors.orange[500],
+    },
+    high: {
+      backgroundColor: colors.orange[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.orange[500],
+    },
+  },
+  yellow: {
+    low: {
+      backgroundColor: colors.yellow[100],
+      textColor: colors.yellow[950],
+      borderColor: colors.yellow[300],
+      color: colors.yellow[500],
+    },
+    high: {
+      backgroundColor: colors.yellow[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.yellow[500],
+    },
+  },
+  green: {
+    low: {
+      backgroundColor: colors.green[100],
+      textColor: colors.green[800],
+      borderColor: colors.green[300],
+      color: colors.green[500],
+    },
+    high: {
+      backgroundColor: colors.green[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.green[500],
+    },
+  },
+  teal: {
+    low: {
+      backgroundColor: colors.teal[100],
+      textColor: colors.teal[800],
+      borderColor: colors.teal[300],
+      color: colors.teal[500],
+    },
+    high: {
+      backgroundColor: colors.teal[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.teal[500],
+    },
+  },
+  cyan: {
+    low: {
+      backgroundColor: colors.cyan[100],
+      textColor: colors.cyan[800],
+      borderColor: colors.cyan[300],
+      color: colors.cyan[500],
+    },
+    high: {
+      backgroundColor: colors.cyan[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.cyan[500],
+    },
+  },
+  blue: {
+    low: {
+      backgroundColor: colors.blue[100],
+      textColor: colors.blue[800],
+      borderColor: colors.blue[300],
+      color: colors.blue[500],
+    },
+    high: {
+      backgroundColor: colors.blue[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.blue[500],
+    },
+  },
+  indigo: {
+    low: {
+      backgroundColor: colors.indigo[100],
+      textColor: colors.indigo[800],
+      borderColor: colors.indigo[300],
+      color: colors.indigo[500],
+    },
+    high: {
+      backgroundColor: colors.indigo[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.indigo[500],
+    },
+  },
+  purple: {
+    low: {
+      backgroundColor: colors.purple[100],
+      textColor: colors.purple[800],
+      borderColor: colors.purple[300],
+      color: colors.purple[500],
+    },
+    high: {
+      backgroundColor: colors.purple[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.purple[500],
+    },
+  },
+  pink: {
+    low: {
+      backgroundColor: colors.pink[100],
+      textColor: colors.pink[800],
+      borderColor: colors.pink[300],
+      color: colors.pink[500],
+    },
+    high: {
+      backgroundColor: colors.pink[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+      color: colors.pink[500],
+    },
+  },
+  white: {
+    low: {
+      backgroundColor: colors.white,
+      textColor: colors.slate[600],
+      borderColor: 'transparent',
+      color: colors.slate[100],
+    },
+    high: {
+      backgroundColor: colors.white,
+      textColor: colors.black,
+      borderColor: 'transparent',
+      color: colors.slate[100],
+    },
+  },
+};
+
+const colorNames = {
+  info: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  danger: 'red',
+  error: 'red',
+} as Record<string, string>;
+
+export function getColorConfig(color: string, contrast = false): ColorConfig {
+
+  color = colorNames[color] || color;
+
+  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
+
+  if (colorConfig) {
+    return colorConfig;
+  }
+
+  const c = getContrast(color, 'white');
+
+  let borderColor = 'transparent';
+  let textColor = 'white';
+
+  if (c < 2) {
+    textColor = darken(color, 0.5);
+    borderColor = darken(color, 0.1);
+  }
+
+  return {
+    backgroundColor: color,
+    textColor: textColor,
+    borderColor: borderColor,
+    color: color
+  };
+}

package/src/utils/cropper/avatar.ts

@@ -1,33 +1,33 @@
-import { CropperConfig } from '@/types';
-import { isNumber, merge } from 'lodash';
-import { PresetInterface } from './presetInterface';
-
-export class AvatarPreset extends PresetInterface {
-  public handle(): CropperConfig {
-    const size = this.presetOptions?.size;
-
-    let defaultSize = isNumber(size) ? size : 200;
-
-    if (this.config?.maxWidth) {
-      defaultSize = Math.min(this.config.maxWidth, defaultSize);
-    }
-
-    return merge(this.config, {
-      width: defaultSize,
-      height: defaultSize,
-      enableOrientation: true,
-      enableResize: false,
-      enableZoom: true,
-      showZoomer: true,
-      viewport: {
-        width: defaultSize,
-        height: defaultSize,
-        type: 'circle',
-      },
-      boundary: {
-        width: defaultSize,
-        height: defaultSize,
-      },
-    });
-  }
-}
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class AvatarPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+
+    let defaultSize = isNumber(size) ? size : 200;
+
+    if (this.config?.maxWidth) {
+      defaultSize = Math.min(this.config.maxWidth, defaultSize);
+    }
+
+    return merge(this.config, {
+      width: defaultSize,
+      height: defaultSize,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: defaultSize,
+        height: defaultSize,
+        type: 'circle',
+      },
+      boundary: {
+        width: defaultSize,
+        height: defaultSize,
+      },
+    });
+  }
+}

package/src/utils/cropper/cover.ts

@@ -1,41 +1,41 @@
-import { CropperConfig } from '@/types';
-import { isNumber, merge } from 'lodash';
-import { PresetInterface } from './presetInterface';
-
-export class CoverPreset extends PresetInterface {
-  public handle(): CropperConfig {
-    const size = this.presetOptions?.size;
-    const ratio = this.presetOptions?.ratio;
-
-    const defaultRatio = isNumber(ratio) ? ratio : 16 / 9;
-    let width = isNumber(size) ? size : 300;
-    let height = width / defaultRatio;
-    const padding = height * 0.05;
-
-    if (this.config?.maxWidth) {
-      const safeWidth = Math.min(this.config.maxWidth, width);
-      if (safeWidth !== width) {
-        height = safeWidth / defaultRatio;
-        width = safeWidth;
-      }
-    }
-
-    return merge(this.config, {
-      width: width,
-      height: height,
-      enableOrientation: true,
-      enableResize: false,
-      enableZoom: true,
-      showZoomer: true,
-      viewport: {
-        width: width - padding,
-        height: height - padding,
-        type: 'square',
-      },
-      boundary: {
-        width: width,
-        height: height,
-      },
-    });
-  }
-}
+import { CropperConfig } from '@/types';
+import { isNumber, merge } from 'lodash';
+import { PresetInterface } from './presetInterface';
+
+export class CoverPreset extends PresetInterface {
+  public handle(): CropperConfig {
+    const size = this.presetOptions?.size;
+    const ratio = this.presetOptions?.ratio;
+
+    const defaultRatio = isNumber(ratio) ? ratio : 16 / 9;
+    let width = isNumber(size) ? size : 300;
+    let height = width / defaultRatio;
+    const padding = height * 0.05;
+
+    if (this.config?.maxWidth) {
+      const safeWidth = Math.min(this.config.maxWidth, width);
+      if (safeWidth !== width) {
+        height = safeWidth / defaultRatio;
+        width = safeWidth;
+      }
+    }
+
+    return merge(this.config, {
+      width: width,
+      height: height,
+      enableOrientation: true,
+      enableResize: false,
+      enableZoom: true,
+      showZoomer: true,
+      viewport: {
+        width: width - padding,
+        height: height - padding,
+        type: 'square',
+      },
+      boundary: {
+        width: width,
+        height: height,
+      },
+    });
+  }
+}

package/src/utils/cropper/presetInterface.ts

@@ -1,16 +1,16 @@
-import { CropperConfig } from '@/types';
-
-export abstract class PresetInterface {
-  protected config: CropperConfig | null = null;
-  protected presetOptions: Record<string, any> | null = null;
-
-  constructor(
-    config: CropperConfig | null = null,
-    presetOptions: Record<string, any> | null = null
-  ) {
-    this.config = config;
-    this.presetOptions = presetOptions;
-  }
-
-  public abstract handle(): CropperConfig;
-}
+import { CropperConfig } from '@/types';
+
+export abstract class PresetInterface {
+  protected config: CropperConfig | null = null;
+  protected presetOptions: Record<string, any> | null = null;
+
+  constructor(
+    config: CropperConfig | null = null,
+    presetOptions: Record<string, any> | null = null
+  ) {
+    this.config = config;
+    this.presetOptions = presetOptions;
+  }
+
+  public abstract handle(): CropperConfig;
+}

package/src/utils/cropper/presets.ts

@@ -1,7 +1,7 @@
-import { AvatarPreset } from './avatar';
-import { CoverPreset } from './cover';
-
-export const presets = {
-  avatar: AvatarPreset,
-  cover: CoverPreset,
-};
+import { AvatarPreset } from './avatar';
+import { CoverPreset } from './cover';
+
+export const presets = {
+  avatar: AvatarPreset,
+  cover: CoverPreset,
+};