@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/Skeleton/Skeleton.tsx

@@ -1,70 +1,70 @@
-import styles from '../css/skeleton.module.scss';
-
-interface EvoSkeletonProps {
-  width?: number | string;
-  height?: number | string;
-  borderRadius?: number | string;
-  className?: string;
-  animated?: boolean;
-}
-
-interface EvoSkeletonTextProps {
-  lines?: number;
-  className?: string;
-  animated?: boolean;
-}
-
-interface EvoSkeletonCircleProps {
-  size?: number | string;
-  className?: string;
-  animated?: boolean;
-}
-
-const toSize = (v: number | string) => (typeof v === 'number' ? `${v}px` : v);
-
-const EvoSkeletonText = ({ lines = 3, className = '', animated = true }: EvoSkeletonTextProps) => (
-  <div className={`${styles.textGroup} ${className}`}>
-    {Array.from({ length: lines }).map((_, i) => (
-      <div
-        key={i}
-        className={[styles.skeleton, animated ? styles.animated : ''].filter(Boolean).join(' ')}
-        style={{
-          width: i === lines - 1 ? '65%' : '100%',
-          height: '0.875rem',
-          borderRadius: '4px',
-        }}
-      />
-    ))}
-  </div>
-);
-
-const EvoSkeletonCircle = ({ size = 40, className = '', animated = true }: EvoSkeletonCircleProps) => (
-  <div
-    className={[styles.skeleton, animated ? styles.animated : '', className].filter(Boolean).join(' ')}
-    style={{
-      width: toSize(size),
-      height: toSize(size),
-      borderRadius: '50%',
-    }}
-  />
-);
-
-export const EvoSkeleton = ({
-  width = '100%',
-  height = '1rem',
-  borderRadius = '6px',
-  className = '',
-  animated = true,
-}: EvoSkeletonProps) => (
-  <div
-    className={[styles.skeleton, animated ? styles.animated : '', className].filter(Boolean).join(' ')}
-    style={{
-      width: toSize(width),
-      height: toSize(height),
-      borderRadius: toSize(borderRadius),
-    }}
-  />
-);
-
-EvoSkeleton.Text = EvoSkeletonText;
-EvoSkeleton.Circle = EvoSkeletonCircle;
+import styles from '../css/skeleton.module.scss';
+
+interface EvoSkeletonProps {
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number | string;
+  className?: string;
+  animated?: boolean;
+}
+
+interface EvoSkeletonTextProps {
+  lines?: number;
+  className?: string;
+  animated?: boolean;
+}
+
+interface EvoSkeletonCircleProps {
+  size?: number | string;
+  className?: string;
+  animated?: boolean;
+}
+
+const toSize = (v: number | string) => (typeof v === 'number' ? `${v}px` : v);
+
+const EvoSkeletonText = ({ lines = 3, className = '', animated = true }: EvoSkeletonTextProps) => (
+  <div className={`${styles.textGroup} ${className}`}>
+    {Array.from({ length: lines }).map((_, i) => (
+      <div
+        key={i}
+        className={[styles.skeleton, animated ? styles.animated : ''].filter(Boolean).join(' ')}
+        style={{
+          width: i === lines - 1 ? '65%' : '100%',
+          height: '0.875rem',
+          borderRadius: '4px',
+        }}
+      />
+    ))}
+  </div>
+);
+
+const EvoSkeletonCircle = ({ size = 40, className = '', animated = true }: EvoSkeletonCircleProps) => (
+  <div
+    className={[styles.skeleton, animated ? styles.animated : '', className].filter(Boolean).join(' ')}
+    style={{
+      width: toSize(size),
+      height: toSize(size),
+      borderRadius: '50%',
+    }}
+  />
+);
+
+export const EvoSkeleton = ({
+  width = '100%',
+  height = '1rem',
+  borderRadius = '6px',
+  className = '',
+  animated = true,
+}: EvoSkeletonProps) => (
+  <div
+    className={[styles.skeleton, animated ? styles.animated : '', className].filter(Boolean).join(' ')}
+    style={{
+      width: toSize(width),
+      height: toSize(height),
+      borderRadius: toSize(borderRadius),
+    }}
+  />
+);
+
+EvoSkeleton.Text = EvoSkeletonText;
+EvoSkeleton.Circle = EvoSkeletonCircle;

package/src/Stack/Stack.tsx

@@ -1,52 +1,52 @@
-import React, { CSSProperties } from 'react';
-
-type Direction = 'row' | 'column';
-type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-
-interface EvoStackProps {
-  children: React.ReactNode;
-  direction?: Direction;
-  gap?: number | string;
-  align?: Align;
-  justify?: Justify;
-  wrap?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const alignMap: Record<Align, string> = {
-  start: 'flex-start', center: 'center', end: 'flex-end',
-  stretch: 'stretch', baseline: 'baseline',
-};
-
-const justifyMap: Record<Justify, string> = {
-  start: 'flex-start', center: 'center', end: 'flex-end',
-  between: 'space-between', around: 'space-around', evenly: 'space-evenly',
-};
-
-export const EvoStack = ({
-  children,
-  direction = 'column',
-  gap = '1rem',
-  align = 'stretch',
-  justify = 'start',
-  wrap = false,
-  className = '',
-  style,
-}: EvoStackProps) => (
-  <div
-    className={className}
-    style={{
-      display: 'flex',
-      flexDirection: direction,
-      gap: typeof gap === 'number' ? `${gap}px` : gap,
-      alignItems: alignMap[align],
-      justifyContent: justifyMap[justify],
-      flexWrap: wrap ? 'wrap' : 'nowrap',
-      ...style,
-    }}
-  >
-    {children}
-  </div>
-);
+import React, { CSSProperties } from 'react';
+
+type Direction = 'row' | 'column';
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+interface EvoStackProps {
+  children: React.ReactNode;
+  direction?: Direction;
+  gap?: number | string;
+  align?: Align;
+  justify?: Justify;
+  wrap?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const alignMap: Record<Align, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end',
+  stretch: 'stretch', baseline: 'baseline',
+};
+
+const justifyMap: Record<Justify, string> = {
+  start: 'flex-start', center: 'center', end: 'flex-end',
+  between: 'space-between', around: 'space-around', evenly: 'space-evenly',
+};
+
+export const EvoStack = ({
+  children,
+  direction = 'column',
+  gap = '1rem',
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  className = '',
+  style,
+}: EvoStackProps) => (
+  <div
+    className={className}
+    style={{
+      display: 'flex',
+      flexDirection: direction,
+      gap: typeof gap === 'number' ? `${gap}px` : gap,
+      alignItems: alignMap[align],
+      justifyContent: justifyMap[justify],
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);