@repobit/dex-system-design 0.21.2 → 0.22.1

package/src/components/image/image.css.js

@@ -1,101 +1,149 @@
 import { css } from "lit";
 
 export default css`
-@layer bd-components {
-  .bd-img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-  }
-
-  /* Object Fit Variants */
-  .bd-img.cover {
-    object-fit: cover;
-  }
-
-  .bd-img.contain {
-    object-fit: contain;
-  }
-
-  .bd-img.fill {
-    object-fit: fill;
-  }
-
-  .bd-img.none {
-    object-fit: none;
-  }
-
-  .bd-img.scale-down {
-    object-fit: scale-down;
-  }
-
-  /* Rounded Variants */
-  .bd-img.rounded {
-    border-radius: var(--spacing-8);
-  }
-
-  .bd-img.rounded-lg {
-    border-radius: var(--spacing-12);
-  }
-
-  .bd-img.rounded-full {
-    border-radius: 50%;
-  }
-
-  /* Shadow Variants */
-  .bd-img.shadow {
-    box-shadow: var(--shadow-sm);
-  }
-
-  .bd-img.shadow-lg {
-    box-shadow: var(--shadow-lg);
-  }
-
-  .bd-img.shadow-xl {
-    box-shadow: var(--shadow-xl);
-  }
-
-  /* Border Variants */
-  .bd-img.bordered {
-    border: 2px solid var(--color-neutral-200);
-  }
-
-  .bd-img.bordered-primary {
-    border: 2px solid var(--color-blue-500);
-  }
-
-  .bd-img.bordered-thick {
-    border: 4px solid var(--color-neutral-300);
-  }
-
-  /* Responsive Behavior */
-  .bd-img.responsive {
-    width: 100%;
-    height: auto;
-  }
-
-  /* Aspect Ratio Containers */
-  .bd-img.aspect-16-9 {
-    aspect-ratio: 16 / 9;
-  }
-
-  .bd-img.aspect-4-3 {
-    aspect-ratio: 4 / 3;
-  }
-
-  .bd-img.aspect-1-1 {
-    aspect-ratio: 1 / 1;
-  }
-
-  /* Hover Effects */
-  .bd-img.hover-zoom:hover {
-    transform: scale(1.05);
-    transition: transform 0.3s ease;
-  }
-
-  .bd-img.hover-shadow:hover {
-    box-shadow: var(--shadow-lg);
-    transition: box-shadow 0.3s ease;
-  }
-};
-`
+  @layer bd-components {
+    .bd-img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+
+    /* Object Fit Variants */
+    .bd-img.cover {
+      object-fit: cover;
+    }
+
+    .bd-img.contain {
+      object-fit: contain;
+    }
+
+    .bd-img.fill {
+      object-fit: fill;
+    }
+
+    .bd-img.none {
+      object-fit: none;
+    }
+
+    .bd-img.scale-down {
+      object-fit: scale-down;
+    }
+
+    /* Radius Variants - Updated to match radius prop */
+    .bd-img.radius-none {
+      border-radius: 0;
+    }
+
+    .bd-img.radius-sm {
+      border-radius: var(--radius-sm, var(--spacing-4, 0.25rem));
+    }
+
+    .bd-img.radius-md {
+      border-radius: var(--radius-md, var(--spacing-8, 0.5rem));
+    }
+
+    .bd-img.radius-lg {
+      border-radius: var(--radius-lg, var(--spacing-12, 0.75rem));
+    }
+
+    .bd-img.radius-full {
+      border-radius: 50%;
+    }
+
+    /* Shadow Variants - Updated to match shadow prop */
+    .bd-img.shadow-none {
+      box-shadow: none;
+    }
+
+    .bd-img.shadow-sm {
+      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+    }
+
+    .bd-img.shadow-md {
+      box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+    }
+
+    .bd-img.shadow-lg {
+      box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+    }
+
+    /* Shadow XL - Additional variant */
+    .bd-img.shadow-xl {
+      box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+    }
+
+    /* Border Variants - Keep for additional styling options */
+    .bd-img.bordered {
+      border: 2px solid var(--color-neutral-200);
+    }
+
+    .bd-img.bordered-primary {
+      border: 2px solid var(--color-blue-500);
+    }
+
+    .bd-img.bordered-thick {
+      border: 4px solid var(--color-neutral-300);
+    }
+
+    /* Responsive Behavior */
+    .bd-img.responsive {
+      width: 100%;
+      height: auto;
+    }
+
+    /* Aspect Ratio Containers */
+    .bd-img.aspect-16-9 {
+      aspect-ratio: 16 / 9;
+    }
+
+    .bd-img.aspect-4-3 {
+      aspect-ratio: 4 / 3;
+    }
+
+    .bd-img.aspect-1-1 {
+      aspect-ratio: 1 / 1;
+    }
+
+    /* Hover Effects */
+    .bd-img.hover-zoom:hover {
+      transform: scale(1.05);
+      transition: transform 0.3s ease;
+    }
+
+    .bd-img.hover-shadow:hover {
+      box-shadow: var(--shadow-lg);
+      transition: box-shadow 0.3s ease;
+    }
+
+    /* Focus styles for accessibility */
+    .bd-img:focus {
+      outline: 2px solid var(--color-primary-500, #3b82f6);
+      outline-offset: 2px;
+    }
+
+    /* Loading state */
+    .bd-img:not([src]) {
+      background-color: var(--color-neutral-100, #f3f4f6);
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-neutral-400, #9ca3af);
+      font-size: var(--text-sm, 0.875rem);
+    }
+
+    .bd-img:not([src])::before {
+      content: "Image loading...";
+    }
+
+    /* Smooth transitions for radius and shadow changes */
+    .bd-img {
+      transition: border-radius 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    /* Performance optimization for transforms */
+    .bd-img.hover-zoom {
+      will-change: transform;
+    }
+  }
+`;

package/src/components/image/image.js

@@ -9,7 +9,9 @@ export class BdImg extends LitElement {
     width  : { type: Number },
     height : { type: Number },
     loading: { type: String },
-    fit    : { type: String }
+    fit    : { type: String },
+    radius : { type: String },
+    shadow : { type: String }
   };
 
   constructor() {
@@ -20,9 +22,18 @@ export class BdImg extends LitElement {
     this.height = null;
     this.loading = "lazy";
     this.fit = "cover";
+    this.radius = "none";
+    this.shadow = "none";
   }
 
   render() {
+    const baseClass = 'bd-img';
+    const fitClass = this.fit || 'cover';
+    const radiusClass = `radius-${this.radius || 'none'}`;
+    const shadowClass = `shadow-${this.shadow || 'none'}`;
+
+    const finalClass = `${baseClass} ${fitClass} ${radiusClass} ${shadowClass}`;
+
     return html`
       <img
         src="${this.src}"
@@ -30,7 +41,7 @@ export class BdImg extends LitElement {
         width="${this.width}"
         height="${this.height}"
         loading="${this.loading}"
-        class="bd-img ${this.fit}"
+        class="${finalClass}"
         @load="${this._handleLoad}"
         @error="${this._handleError}"
       />