✨ Refactored password, pin and progress (#283)

packages/lib/components/accordion/__tests__/__snapshots__/accordion.test.tsx.snap

@@ -5,10 +5,10 @@ exports[`Accordion > should render snapshot 1`] = `
   class="_accordion_f93c7f _no-border_f93c7f"
 >
   <div
-    aria-controls="accordion-body-Uk25XS3N-TG7sBDcLAlFp"
+    aria-controls="accordion-body-GB-EI7658pwFxWY-ixoZf"
     aria-expanded="false"
     class="_header_c2ceb5 _focusable_c2ceb5 _size_c2ceb5"
-    id="accordion-mTU_zI6Ifp__d7oEZ1LJY"
+    id="accordion-ZIft0-4ZAwgH7JPObrx-Q"
     role="heading"
     style="--rc-accordion-header-height: 40px; outline: none; position: relative;"
     tabindex="0"
@@ -40,9 +40,9 @@ exports[`Accordion > should render snapshot 1`] = `
     />
   </div>
   <div
-    aria-labelledby="accordion-mTU_zI6Ifp__d7oEZ1LJY"
+    aria-labelledby="accordion-ZIft0-4ZAwgH7JPObrx-Q"
     class="_body_f93c7f _animate_f93c7f _close_f93c7f"
-    id="accordion-body-Uk25XS3N-TG7sBDcLAlFp"
+    id="accordion-body-GB-EI7658pwFxWY-ixoZf"
     role="region"
     style="--title-color: #000; --transition: cubic-bezier(0.19, 1, 0.22, 1); --max-height: 0px;"
   >

packages/lib/components/carousel/__tests__/carousel-items.test.tsx

@@ -8,9 +8,9 @@ import { CarouselItems } from '../carousel-items';
 
 describe('CarouselItems', () => {
   const carouselItems = [
-    { id: '1', left: '0', top: '0', width: 100, height: 100 },
-    { id: '2', left: '100', top: '0', width: 100, height: 100 },
-    { id: '3', left: '200', top: '0', width: 100, height: 100 },
+    { height: 100, id: '1', left: '0', top: '0', width: 100 },
+    { height: 100, id: '2', left: '100', top: '0', width: 100 },
+    { height: 100, id: '3', left: '200', top: '0', width: 100 },
   ];
 
   // Test the activePage prop.

packages/lib/components/carousel/__tests__/carousel-track.test.tsx

@@ -5,15 +5,15 @@ import { vi } from 'vitest';
 
 describe('CarouselTrack', () => {
   const defaultProps: CarouselTrackProps = {
-    length: 5,
-    handleSelection: vi.fn(),
     activeIndex: 0,
     direction: 'horizontal',
+    focusable: true,
+    handleSelection: vi.fn(),
+    hideNext: false,
+    hidePrevious: false,
+    length: 5,
     onNext: vi.fn(),
     onPrevious: vi.fn(),
-    hidePrevious: false,
-    hideNext: false,
-    focusable: true,
   };
 
   it('renders without crashing', () => {

packages/lib/components/carousel/carousel-items.tsx

@@ -7,7 +7,6 @@ import React, { CSSProperties, ReactNode, useMemo } from 'react';
 import { CarouselItemsProps } from './carousel-model';
 import styles from './carousel.module.scss';
 
-
 const CarouselItems: React.FunctionComponent<CarouselItemsProps> = ({
   activePage = 0,
   carouselItems,

packages/lib/components/page-header/page-header.module.scss

@@ -3,14 +3,15 @@
 @use '@design/list.scss';
 @use 'sass:map';
 
+// Define available sizes and corresponding heights
 $sizes: (sm, md, lg);
-
 $heights: (
   sm: 30px,
   md: 35px,
   lg: 40px,
 );
 
+// Base styles for page header
 .page_header {
   margin-bottom: 1rem;
   width: 100%;
@@ -19,32 +20,17 @@ $heights: (
     @extend %left;
     margin: 0.5rem 0;
     width: 100%;
+    text-align: left; // Default text alignment
   }
-}
-
-.page_header:not(.rtl) {
-  h2 {
-    text-align: left;
-  }
-}
-
-.rtl {
-  direction: rtl;
 
-  h2 {
-    text-align: right;
-  }
-}
-
-@each $size in $sizes {
-  .#{$size} {
-    .title {
-      @extend %text-#{$size};
-      height: map.get($heights, $size);
+  &.rtl {
+    h2 {
+      text-align: right; // RTL text alignment
     }
   }
 }
 
+// Styles for header icon
 .icon {
   @extend %icon;
   color: theme.$primary;
@@ -57,12 +43,14 @@ $heights: (
   }
 }
 
+// Styles for title container
 .title_container {
   @extend %left;
   border-bottom: 1px solid theme.$dark-control-bg;
   width: 100%;
 }
 
+// Styles for content
 .content {
   padding-top: 1rem;
 
@@ -74,3 +62,13 @@ $heights: (
     color: theme.$black;
   }
 }
+
+// Generate styles for different header sizes
+@each $size in $sizes {
+  .#{$size} {
+    .title {
+      @extend %text-#{$size};
+      height: map.get($heights, $size);
+    }
+  }
+}

packages/lib/components/page-header/page-header.tsx

@@ -11,38 +11,49 @@ export interface PageHeaderProps {
   title: string;
 }
 
+/**
+ * PageHeader Component
+ *    @property {boolean} RTL - Whether the layout is right-to-left (default: false).
+ *    @property {React.ReactNode | React.ReactNode[]} children - Child components or elements.
+ *    @property {React.ReactNode} icon - An optional icon to display in the header.
+ *    @property {string} size - The size of the header ('sm', 'md', or 'lg', default: 'sm').
+ *    @property {string} title - The title text for the header.
+ * @returns {JSX.Element} The PageHeader component.
+ */
 const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   title,
   children,
   RTL = false,
   size = 'sm',
   icon,
 }) => {
+  // Determine if dark mode is enabled
   const isDarkMode = useMemo(() => isDark(), []);
+
+  // Compute class for header, including RTL and size considerations
   const headerClass = useMemo(() => {
     return classNames(styles.page_header, {
       [styles.rtl]: RTL,
       [styles[`${size}`]]: size,
     });
-  }, []);
+  }, [RTL, size]);
 
-  const titleClass = useMemo(() => {
-    return classNames(styles.title);
-  }, []);
+  // Compute class for title
+  const titleClass = useMemo(() => classNames(styles.title), []);
 
+  // Compute class for header icon
   const headerIconClass = useMemo(() => {
     return classNames(styles.icon, {
       [styles[`icon_${size}`]]: true,
     });
-  }, []);
-
-  const contentClass = useMemo(
-    () =>
-      classNames(styles.content, {
-        [styles.dark]: isDarkMode,
-      }),
-    []
-  );
+  }, [size]);
+
+  // Compute class for content, including dark mode considerations
+  const contentClass = useMemo(() => {
+    return classNames(styles.content, {
+      [styles.dark]: isDarkMode,
+    });
+  }, [isDarkMode]);
 
   return (
     <header className={headerClass}>

packages/lib/components/password/password.module.scss

@@ -4,33 +4,39 @@
 @use '@design/shadow.scss';
 @use '@design/effects.scss';
 
+// Size definitions
 $sizes: (
   sm: 1rem,
   md: 2rem,
   lg: 3rem,
 );
 
+// Wrapper styles
 .wrapper {
   align-items: center;
   display: grid;
   width: 100%;
 
+  // Dark theme styling
   &.dark {
     background: theme.$gunmetal-gray;
   }
 
+  // Light theme styling
   &:not(.dark) {
     background: theme.$light-bg;
     box-shadow: inset 0 0 3px 1px rgba($color: theme.$alto, $alpha: 0.5);
   }
 
+  // Size variations
   @each $key, $val in $sizes {
     $icon-size: calc(var(--rc-icon-size-#{$key}) + 14px);
     &.#{$key} {
       grid-template-columns: calc(100% - $icon-size) $icon-size;
     }
   }
 
+  // Border styling
   &:not(.border) {
     @extend %border-radius;
   }
@@ -39,16 +45,19 @@ $sizes: (
     @extend %border;
   }
 
+  // RTL direction
   &.RTL {
     direction: rtl;
   }
 }
 
+// Input wrapper styling
 .input_wrapper {
   align-self: flex-start;
   width: 100%;
 }
 
+// Unmask icon styling
 .unmask_icon {
   @include effects.halo();
   color: theme.$primary;
@@ -57,6 +66,7 @@ $sizes: (
   position: relative;
   z-index: 1;
 
+  // Size variations
   @each $key, $val in $sizes {
     &.#{$key} {
       @extend %icon-#{$key};