@salla.sa/twilight-components 1.2.0 → 1.3.1

package/example/assets/tailwind.css

@@ -1852,6 +1852,47 @@ video {
   text-align: center;
 }
 
+.s-list-tile-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+.s-list-tile-item-href {
+  cursor: pointer;
+}
+
+.s-list-tile-item-icon {
+  margin-right: 1rem;
+  flex-shrink: 0;
+}
+
+[dir="rtl"] .s-list-tile-item-icon {
+  margin-left: 1rem;
+  margin-right: 0px;
+}
+
+.s-list-tile-item-title {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.s-list-tile-item-subtitle {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.s-loading-fill-color {
+  fill: var(--color-primary);
+}
+
 .s-localization-modal-title {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2135,6 +2176,318 @@ video {
   transform: scale(-1) !important;
 }
 
+.s-loyalty-prize-item {
+  margin-bottom: 0.5rem;
+  height: 20rem;
+  width: 16rem;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-size: cover;
+  text-align: center;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.s-loyalty-prize-item-selected {
+  --tw-translate-y: -0.125rem !important;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-primary);
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.s-loyalty-prize-item-selected .s-loyalty-prize-item-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: var(--color-primary);
+}
+
+.s-loyalty-prize-item-selected .s-loyalty-prize-item-check > div {
+  height: 0.625rem;
+  width: 0.625rem;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+.s-loyalty-prize-item-image {
+  height: 9rem;
+  width: 100%;
+  background-size: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.s-loyalty-prize-item-title {
+  margin-top: 0.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+}
+
+.s-loyalty-prize-item-check {
+  position: absolute;
+  left: 1.25rem;
+  margin-left: auto;
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+[dir="rtl"] .s-loyalty-prize-item-check {
+  left: 0px;
+  right: 1.25rem;
+}
+
+.s-loyalty-prize-item-subtitle {
+  margin-top: 0.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.s-loyalty-prize-item-points {
+  position: absolute;
+  bottom: 0px;
+  margin-left: auto;
+  margin-top: 0.5rem;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-primary);
+}
+
+.s-loyalty-program-redeem-btn {
+  overflow: hidden;
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.s-loyalty-header {
+  margin-bottom: 1.25rem;
+  display: block;
+}
+
+.s-loyalty-header-icon {
+  position: relative;
+  display: flex;
+  height: 6rem;
+  width: 6rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: #ff9e011a;
+}
+
+.s-loyalty-header-icon > img {
+  height: 3rem;
+  width: 3rem;
+}
+
+.s-loyalty-header-title {
+  margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.s-loyalty-header-subtitle {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.s-loyalty-activator-icon {
+  display: flex;
+  height: 3rem;
+  width: 3rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+.s-loyalty-activator-icon > svg {
+  fill: #fff;
+}
+
+.s-loyalty-confirmation-modal-conten {
+  padding-bottom: 1.25rem;
+}
+
+.s-loyalty-confirmation-actions {
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.s-loyalty-confirmation-actions > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.s-loyalty-confirmation-actions {
+  padding: 1.25rem;
+  padding-top: 0.5rem;
+}
+
+.s-loyalty-widget .s-list-tile-item {
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.s-loyalty-widget-icon {
+  display: flex;
+  height: 50px;
+  width: 50px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+.s-loyalty-widget-icon > svg {
+  width: 1.5rem;
+  fill: #fff;
+}
+
+.s-loyalty-after-exchange .s-list-tile-item {
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.s-loyalty-after-exchange .s-list-tile-item::after {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-primary);
+  opacity: .08;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.s-loyalty-after-exchange .s-list-tile-item {
+  position: relative;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.s-loyalty-after-exchange .s-list-tile-item::after {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-primary);
+  opacity: .08;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.s-loyalty-after-exchange .s-list-tile-item .s-list-tile-item-title {
+  font-size: 15px;
+}
+
+.s-loyalty-after-exchange-reset {
+  position: absolute;
+  right: 1rem;
+  height: 1.5rem;
+}
+
+[dir="rtl"] .s-loyalty-after-exchange-reset {
+  right: unset;
+  left: 1rem;
+}
+
+.s-loyalty-after-exchange-reset button {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+  font-size: 15px;
+}
+
+.s-loyalty-after-exchange-reset button span {
+  display: flex;
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  align-items: center;
+  justify-content: center;
+}
+
+.s-loyalty-after-exchange-reset button svg {
+  fill: #f87171;
+}
+
+.s-loyalty-after-exchange-reset button:hover svg {
+  fill: #fff;
+}
+
+.s-loyalty-after-exchange-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.s-loyalty-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .s-modal-container {
   position: fixed;
   top: 0px;
@@ -2204,13 +2557,14 @@ video {
 
 .s-modal-close {
   position: absolute;
+  right: 1rem;
   top: 1rem;
   z-index: 1;
   cursor: pointer;
   border-style: none;
   background-color: transparent;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
@@ -2225,25 +2579,16 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-[dir="ltr"] .s-modal-close {
-  right: 1rem;
-}
-
 [dir="rtl"] .s-modal-close {
   left: 1rem;
+  right: 0px !important;
+  text-align: left;
 }
 
 @media (min-width: 640px) {
   .s-modal-close {
-    top: 1.25rem;
-  }
-
-  [dir="ltr"] .s-modal-close {
     right: 1.25rem;
-  }
-
-  [dir="rtl"] .s-modal-close {
-    left: 1rem;
+    top: 1.25rem;
   }
 }
 
@@ -2929,6 +3274,98 @@ video {
   transform: scale(-1) translateX(0) !important;
 }
 
+.s-placeholder-title {
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.s-placeholder-description {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.s-placeholder-icon {
+  margin-bottom: 1rem;
+  fill: #e5e7eb;
+}
+
+.s-placeholder-icon-xl {
+  margin-bottom: 1.5rem;
+}
+
+.s-placeholder-align-left {
+  text-align: left;
+}
+
+.s-placeholder-align-center {
+  text-align: center;
+}
+
+.s-placeholder-align-right {
+  text-align: right;
+}
+
+.s-placeholder-align-right > .s-placeholder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+[dir="rtl"] .s-placeholder-align-right > .s-placeholder-icon {
+  justify-content: flex-start;
+}
+
+.s-placeholder-align-right > .s-placeholder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+[dir="rtl"] .s-placeholder-align-right > .s-placeholder-icon {
+  justify-content: flex-start;
+}
+
+.s-placeholder-align-center > .s-placeholder-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.s-placeholder-icon-xs > svg {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-placeholder-icon-sm > svg {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-placeholder-icon-md > svg {
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-placeholder-icon-lg > svg {
+  --tw-scale-x: 1.5;
+  --tw-scale-y: 1.5;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-placeholder-icon-xl > svg {
+  --tw-scale-x: 2;
+  --tw-scale-y: 2;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .s-product-availability-wrap {
   width: 100%;
 }
@@ -3051,6 +3488,16 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
 }
 
+.s-product-size-guide-block {
+  display: block;
+}
+
+.s-product-size-guide-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .s-quantity-input-container {
   display: flex;
   height: 2.5rem;
@@ -3802,6 +4249,124 @@ unicode {
   transform: translateY(-50%) !important;
 }
 
+.s-social-share-wrapper {
+  position: relative;
+}
+
+.s-social-share-btn i {
+  pointer-events: none;
+}
+
+.s-social-share-list {
+  position: absolute;
+  top: 3rem;
+  left: 2.5px;
+  z-index: 10;
+  display: flex;
+  height: 0px;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 1.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  opacity: 0;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.s-social-share-list.opened {
+  height: auto;
+}
+
+.s-social-share-list a {
+  display: block;
+  padding: 0.75rem;
+}
+
+.s-social-share-list a:hover svg {
+  fill: var(--color-primary);
+}
+
+.s-social-share-icon svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.s-tabs-bg-normal {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.s-tabs-header {
+  display: flex;
+  cursor: pointer;
+  align-content: center;
+  justify-content: flex-start;
+}
+
+.s-tabs-header > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.s-tabs-header {
+  overflow-x: auto;
+  border-bottom-width: 2px;
+  border-color: var(--color-primary);
+}
+
+[dir="rtl"] .s-tabs-header > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
+
+@media (min-width: 768px) {
+  .s-tabs-header {
+    overflow-x: hidden;
+  }
+}
+
+.s-tabs-header-item {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .s-tabs-header-item {
+    padding-left: 1.75rem;
+    padding-right: 1.75rem;
+  }
+}
+
+.s-tabs-content {
+  display: none;
+}
+
+.s-tabs-content-wrapper {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.s-tabs-content-selected {
+  display: block;
+}
+
+.s-tabs-active {
+  background-color: var(--color-primary);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 .s-tel-input-control {
   height: 2.5rem;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "license": "MIT",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -76,8 +76,9 @@
     "form-data": "^4.0.0"
   },
   "dependencies": {
-    "@salla.sa/twilight": "^2.1.12",
+    "@salla.sa/twilight": "^2.6.0",
     "@salla.sa/twilight-tailwind-theme": "^1.0.133",
+    "animejs": "^3.2.1",
     "intl-tel-input": "^17.0.13",
     "swiper": "^8.3.1"
   }