@aristobyte-ui/presets 1.0.34 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +105 -3
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +16 -6
  4. package/dist/index.d.ts +16 -6
  5. package/dist/index.js +59 -11
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +59 -11
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +6 -5
package/dist/index.css CHANGED
@@ -59,7 +59,8 @@
59
59
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
60
60
  display: flex;
61
61
  flex-direction: column;
62
- max-width: 324px;
62
+ gap: 15px;
63
+ max-width: 280px;
63
64
  padding: 22px;
64
65
  width: 100%;
65
66
  }
@@ -81,11 +82,112 @@
81
82
  .SocialMediaCard_module_social-media-card__header {
82
83
  align-items: center;
83
84
  display: flex;
84
- justify-content: center;
85
+ gap: 20px;
86
+ justify-content: space-between;
85
87
  width: 100%;
86
88
  }
89
+ .SocialMediaCard_module_social-media-card__avatar {
90
+ align-content: center;
91
+ background:
92
+ linear-gradient(
93
+ 135deg,
94
+ #ad46ff 0%,
95
+ #f6339a 100%);
96
+ border-radius: 50%;
97
+ display: flex;
98
+ justify-content: center;
99
+ height: 42px;
100
+ overflow: hidden;
101
+ position: relative;
102
+ width: 42px;
103
+ }
104
+ .SocialMediaCard_module_social-media-card__avatar-icon {
105
+ align-content: center;
106
+ color: #ffffff;
107
+ display: flex;
108
+ justify-content: center;
109
+ margin: auto;
110
+ }
111
+ .SocialMediaCard_module_social-media-card__avatar-img {
112
+ height: 42px;
113
+ width: 42px;
114
+ object-fit: cover;
115
+ }
87
116
  .SocialMediaCard_module_social-media-card__text {
88
- width: 100%;
117
+ align-items: flex-start;
118
+ display: flex;
119
+ flex-direction: column;
120
+ justify-content: center;
121
+ }
122
+ .SocialMediaCard_module_social-media-card__title {
123
+ color: #ffffff;
124
+ font-size: 16px;
125
+ font-style: normal;
126
+ font-weight: 500;
127
+ line-height: 16px;
128
+ }
129
+ .SocialMediaCard_module_social-media-card__subtitle {
130
+ color: #99a1af;
131
+ font-size: 14px;
132
+ font-style: normal;
133
+ font-weight: 400;
134
+ line-height: 14px;
135
+ }
136
+ .SocialMediaCard_module_social-media-card__content {
137
+ color: #d1d5dc;
138
+ font-size: 14px;
139
+ font-style: normal;
140
+ font-weight: 400;
141
+ line-height: 14px;
142
+ }
143
+ .SocialMediaCard_module_social-media-card__metrics {
144
+ align-items: center;
145
+ display: flex;
146
+ justify-content: flex-start;
147
+ gap: 14px;
148
+ }
149
+ .SocialMediaCard_module_social-media-card__metric {
150
+ align-items: center;
151
+ display: flex;
152
+ flex-direction: column;
153
+ gap: 5px;
154
+ justify-content: center;
155
+ }
156
+ .SocialMediaCard_module_social-media-card__metric-par {
157
+ align-items: center;
158
+ display: flex;
159
+ gap: 7px;
160
+ justify-content: center;
161
+ }
162
+ .SocialMediaCard_module_social-media-card__metric-text {
163
+ align-items: center;
164
+ display: flex;
165
+ justify-content: center;
166
+ }
167
+ .SocialMediaCard_module_social-media-card__metric-icon {
168
+ align-items: center;
169
+ color: #99a1af;
170
+ display: flex;
171
+ justify-content: center;
172
+ }
173
+ .SocialMediaCard_module_social-media-card__metric-value {
174
+ color: #99a1af;
175
+ font-size: 14px;
176
+ font-style: normal;
177
+ font-weight: 400;
178
+ line-height: 14px;
179
+ }
180
+ .SocialMediaCard_module_social-media-card__tags {
181
+ display: inline-flex;
182
+ flex-wrap: wrap;
183
+ gap: 1px;
184
+ }
185
+ .SocialMediaCard_module_social-media-card__tag {
186
+ margin: 0 2px;
187
+ width: max-content;
188
+ }
189
+ .SocialMediaCard_module_social-media-card__tag-anchor {
190
+ padding: 0;
89
191
  }
90
192
 
91
193
  /* components/StatisticsCards/StatisticsCards.module.scss */
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../components/SocialMediaCard.module.scss","../../../../node_modules/@aristobyte-ui/utils/styles/_settings.scss"],"sourcesContent":["@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.social-media-card {\n background-color: #101828; // @TODO: @COLOR\n box-shadow: $shadow-md;\n display: flex;\n flex-direction: column;\n max-width: calc(22px * 2 + 280px);\n padding: 22px;\n width: 100%;\n\n &-radius {\n &--none {\n border-radius: 0rem; // 0px\n }\n\n &--sm {\n border-radius: 0.25rem; // 4px\n }\n\n &--md {\n border-radius: 0.5rem; // 8px\n }\n\n &--lg {\n border-radius: 0.625rem; // 10px\n }\n\n &--full {\n border-radius: 1.5rem; // 24px\n }\n }\n\n &__header {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n &__text {\n width: 100%;\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows === //\n//@TODO: @SHADOW\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,CAAAA;AACE,oBAAA;AACA,cC+HA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AD9HA,WAAA;AACA,kBAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;;AAGE,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAIJ,CAAAC;AACE,eAAA;AACA,WAAA;AACA,mBAAA;AACA,SAAA;;AAGF,CAAAC;AACE,SAAA;;","names":["social-media-card","social-media-card-radius--none","social-media-card-radius--sm","social-media-card-radius--md","social-media-card-radius--lg","social-media-card-radius--full","social-media-card__header","social-media-card__text"]}
1
+ {"version":3,"sources":["../components/SocialMediaCard.module.scss","../../../../node_modules/@aristobyte-ui/utils/styles/_settings.scss"],"sourcesContent":["@use \"@aristobyte-ui/utils/styles/settings\" as *;\n\n.social-media-card {\n background-color: #101828; // @TODO: @COLOR\n box-shadow: $shadow-md;\n display: flex;\n flex-direction: column;\n gap: 15px;\n max-width: 280px;\n padding: 22px;\n width: 100%;\n\n &-radius {\n &--none {\n border-radius: 0rem; // 0px\n }\n\n &--sm {\n border-radius: 0.25rem; // 4px\n }\n\n &--md {\n border-radius: 0.5rem; // 8px\n }\n\n &--lg {\n border-radius: 0.625rem; // 10px\n }\n\n &--full {\n border-radius: 1.5rem; // 24px\n }\n }\n\n &__header {\n align-items: center;\n display: flex;\n gap: 20px;\n justify-content: space-between;\n width: 100%;\n }\n\n &__avatar {\n align-content: center;\n background: linear-gradient(135deg, #ad46ff 0%, #f6339a 100%);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n height: 42px;\n overflow: hidden;\n position: relative;\n width: 42px;\n\n &-icon {\n align-content: center;\n color: $white;\n display: flex;\n justify-content: center;\n margin: auto;\n }\n\n &-img {\n height: 42px;\n width: 42px;\n object-fit: cover;\n }\n }\n\n &__text {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__title {\n color: $title-color-dark;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;\n }\n\n &__subtitle {\n color: $subtitle-color-dark;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n }\n\n &__content {\n color: $description-color-dark;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n }\n\n &__metrics {\n align-items: center;\n display: flex;\n justify-content: flex-start;\n gap: 14px;\n }\n\n &__metric {\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: 5px;\n justify-content: center;\n\n &-par {\n align-items: center;\n display: flex;\n gap: 7px;\n justify-content: center;\n }\n\n &-text {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n\n &-icon {\n align-items: center;\n color: $icon-color-dark;\n display: flex;\n justify-content: center;\n }\n\n &-value {\n color: $icon-color-dark;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n }\n }\n\n &__tags {\n display: inline-flex;\n flex-wrap: wrap;\n gap: 1px;\n }\n\n &__tag {\n margin: 0 2px;\n width: max-content;\n\n &-anchor {\n padding: 0;\n }\n }\n}\n","// =========================================== //\n// AristoByte UI - Style Settings //\n// =========================================== //\n\n// === Design Tokens — Color Palette === //\n\n// Base\n$white: #ffffff;\n$white-hover: #dddddd;\n$black: #000000;\n$black-hover: #222222;\n$transparent: transparent;\n\n// === Black Transparent Scale === //\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale === //\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) === //\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) === //\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) === //\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) === //\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) === //\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) === //\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens === //\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n$title-color-dark: $white;\n$subtitle-color-dark: #99a1af;\n$description-color-dark: #d1d5dc;\n$icon-color-dark: #99a1af;\n\n// === Shadows === //\n//@TODO: @SHADOW\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n 0 4px 6px -1px rgba($black, 0.1),\n 0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n 0 10px 15px -3px rgba($black, 0.1),\n 0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families === //\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights === //\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights === //\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens === //\n\n// === Titles === //\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles === //\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text === //\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions === //\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons === //\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations === //\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,CAAAA;AACE,oBAAA;AACA,cCsIA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;ADrIA,WAAA;AACA,kBAAA;AACA,OAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;;AAGE,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAGF,CAAAC;AACE,iBAAA;;AAIJ,CAAAC;AACE,eAAA;AACA,WAAA;AACA,OAAA;AACA,mBAAA;AACA,SAAA;;AAGF,CAAAC;AACE,iBAAA;AACA;IAAA;MAAA,MAAA;MAAA,QAAA,EAAA;MAAA,QAAA;AACA,iBAAA;AACA,WAAA;AACA,mBAAA;AACA,UAAA;AACA,YAAA;AACA,YAAA;AACA,SAAA;;AAEA,CAAAC;AACE,iBAAA;AACA,SChDE;ADiDF,WAAA;AACA,mBAAA;AACA,UAAA;;AAGF,CAAAC;AACE,UAAA;AACA,SAAA;AACA,cAAA;;AAIJ,CAAAC;AACE,eAAA;AACA,WAAA;AACA,kBAAA;AACA,mBAAA;;AAGF,CAAAC;AACE,SCrEI;ADsEJ,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAGF,CAAAC;AACE,SC8CkB;AD7ClB,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAGF,CAAAC;AACE,SCuCqB;ADtCrB,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAGF,CAAAC;AACE,eAAA;AACA,WAAA;AACA,mBAAA;AACA,OAAA;;AAGF,CAAAC;AACE,eAAA;AACA,WAAA;AACA,kBAAA;AACA,OAAA;AACA,mBAAA;;AAEA,CAAAC;AACE,eAAA;AACA,WAAA;AACA,OAAA;AACA,mBAAA;;AAGF,CAAAC;AACE,eAAA;AACA,WAAA;AACA,mBAAA;;AAGF,CAAAC;AACE,eAAA;AACA,SCIY;ADHZ,WAAA;AACA,mBAAA;;AAGF,CAAAC;AACE,SCFY;ADGZ,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAIJ,CAAAC;AACE,WAAA;AACA,aAAA;AACA,OAAA;;AAGF,CAAAC;AACE,UAAA,EAAA;AACA,SAAA;;AAEA,CAAAC;AACE,WAAA;;","names":["social-media-card","social-media-card-radius--none","social-media-card-radius--sm","social-media-card-radius--md","social-media-card-radius--lg","social-media-card-radius--full","social-media-card__header","social-media-card__avatar","social-media-card__avatar-icon","social-media-card__avatar-img","social-media-card__text","social-media-card__title","social-media-card__subtitle","social-media-card__content","social-media-card__metrics","social-media-card__metric","social-media-card__metric-par","social-media-card__metric-text","social-media-card__metric-icon","social-media-card__metric-value","social-media-card__tags","social-media-card__tag","social-media-card__tag-anchor"]}
package/dist/index.d.mts CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as React from 'react';
2
+ import { IAnchor } from '@aristobyte-ui/anchor';
2
3
  import { IButton } from '@aristobyte-ui/button';
4
+ import { IconPropsType } from '@aristobyte-ui/utils';
3
5
 
4
6
  interface IActionButtons {
5
7
  }
@@ -224,17 +226,25 @@ declare const SocialEngagement: React.FC<ISocialEngagement>;
224
226
  interface ISocialMediaCard {
225
227
  variant?: "default" | "compact" | "highlight";
226
228
  radius?: "none" | "sm" | "md" | "lg" | "full";
227
- avatar?: string;
228
- avatarIcon?: () => React.JSX.Element;
229
+ avatar?: {
230
+ onClick?: () => void;
231
+ href?: string;
232
+ target?: "_self" | "_blank" | "_parent" | "_top";
233
+ image?: string;
234
+ imageAltText?: string;
235
+ icon?: (props: IconPropsType) => React.JSX.Element;
236
+ background?: string;
237
+ };
229
238
  title?: string;
230
239
  subtitle?: string;
231
240
  button?: IButton;
232
241
  content?: React.ReactElement | React.ReactNode | string;
233
- media?: React.ReactNode;
234
- tags?: string[];
235
- timestamp?: string | Date;
242
+ tags?: IAnchor[];
236
243
  metrics?: {
237
- icon?: () => React.JSX.Element;
244
+ onClick?: () => void;
245
+ href?: string;
246
+ target?: "_self" | "_blank" | "_parent" | "_top";
247
+ icon?: (props: IconPropsType) => React.JSX.Element;
238
248
  label?: string;
239
249
  value?: string;
240
250
  }[];
package/dist/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as React from 'react';
2
+ import { IAnchor } from '@aristobyte-ui/anchor';
2
3
  import { IButton } from '@aristobyte-ui/button';
4
+ import { IconPropsType } from '@aristobyte-ui/utils';
3
5
 
4
6
  interface IActionButtons {
5
7
  }
@@ -224,17 +226,25 @@ declare const SocialEngagement: React.FC<ISocialEngagement>;
224
226
  interface ISocialMediaCard {
225
227
  variant?: "default" | "compact" | "highlight";
226
228
  radius?: "none" | "sm" | "md" | "lg" | "full";
227
- avatar?: string;
228
- avatarIcon?: () => React.JSX.Element;
229
+ avatar?: {
230
+ onClick?: () => void;
231
+ href?: string;
232
+ target?: "_self" | "_blank" | "_parent" | "_top";
233
+ image?: string;
234
+ imageAltText?: string;
235
+ icon?: (props: IconPropsType) => React.JSX.Element;
236
+ background?: string;
237
+ };
229
238
  title?: string;
230
239
  subtitle?: string;
231
240
  button?: IButton;
232
241
  content?: React.ReactElement | React.ReactNode | string;
233
- media?: React.ReactNode;
234
- tags?: string[];
235
- timestamp?: string | Date;
242
+ tags?: IAnchor[];
236
243
  metrics?: {
237
- icon?: () => React.JSX.Element;
244
+ onClick?: () => void;
245
+ href?: string;
246
+ target?: "_self" | "_blank" | "_parent" | "_top";
247
+ icon?: (props: IconPropsType) => React.JSX.Element;
238
248
  label?: string;
239
249
  value?: string;
240
250
  }[];
package/dist/index.js CHANGED
@@ -1224,7 +1224,9 @@ var SocialEngagement = ({ ...props }) => {
1224
1224
 
1225
1225
  // components/SocialMediaCard/index.tsx
1226
1226
  var React56 = __toESM(require("react"));
1227
+ var import_anchor = require("@aristobyte-ui/anchor");
1227
1228
  var import_button = require("@aristobyte-ui/button");
1229
+ var import_utils = require("@aristobyte-ui/utils");
1228
1230
 
1229
1231
  // components/SocialMediaCard/SocialMediaCard.module.scss
1230
1232
  var SocialMediaCard_module_default = {
@@ -1235,23 +1237,52 @@ var SocialMediaCard_module_default = {
1235
1237
  "social-media-card-radius--lg": "SocialMediaCard_module_social-media-card-radius--lg",
1236
1238
  "social-media-card-radius--full": "SocialMediaCard_module_social-media-card-radius--full",
1237
1239
  "social-media-card__header": "SocialMediaCard_module_social-media-card__header",
1238
- "social-media-card__text": "SocialMediaCard_module_social-media-card__text"
1240
+ "social-media-card__avatar": "SocialMediaCard_module_social-media-card__avatar",
1241
+ "social-media-card__avatar-icon": "SocialMediaCard_module_social-media-card__avatar-icon",
1242
+ "social-media-card__avatar-img": "SocialMediaCard_module_social-media-card__avatar-img",
1243
+ "social-media-card__text": "SocialMediaCard_module_social-media-card__text",
1244
+ "social-media-card__title": "SocialMediaCard_module_social-media-card__title",
1245
+ "social-media-card__subtitle": "SocialMediaCard_module_social-media-card__subtitle",
1246
+ "social-media-card__content": "SocialMediaCard_module_social-media-card__content",
1247
+ "social-media-card__metrics": "SocialMediaCard_module_social-media-card__metrics",
1248
+ "social-media-card__metric": "SocialMediaCard_module_social-media-card__metric",
1249
+ "social-media-card__metric-par": "SocialMediaCard_module_social-media-card__metric-par",
1250
+ "social-media-card__metric-text": "SocialMediaCard_module_social-media-card__metric-text",
1251
+ "social-media-card__metric-icon": "SocialMediaCard_module_social-media-card__metric-icon",
1252
+ "social-media-card__metric-value": "SocialMediaCard_module_social-media-card__metric-value",
1253
+ "social-media-card__tags": "SocialMediaCard_module_social-media-card__tags",
1254
+ "social-media-card__tag": "SocialMediaCard_module_social-media-card__tag",
1255
+ "social-media-card__tag-anchor": "SocialMediaCard_module_social-media-card__tag-anchor"
1239
1256
  };
1240
1257
 
1241
1258
  // components/SocialMediaCard/index.tsx
1242
1259
  var import_jsx_runtime = require("react/jsx-runtime");
1260
+ var renderIcon = (icon, props) => {
1261
+ const Icon = icon;
1262
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: (props == null ? void 0 : props.size) || 22 });
1263
+ };
1264
+ var renderAvatar = (avatar) => {
1265
+ if (avatar == null ? void 0 : avatar.image) {
1266
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1267
+ "img",
1268
+ {
1269
+ className: SocialMediaCard_module_default["social-media-card__avatar-img"],
1270
+ src: avatar.image,
1271
+ alt: avatar.imageAltText
1272
+ }
1273
+ );
1274
+ }
1275
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: SocialMediaCard_module_default["social-media-card__avatar-icon"], children: renderIcon((avatar == null ? void 0 : avatar.icon) || import_utils.Icons.User, { size: 24 }) });
1276
+ };
1243
1277
  var SocialMediaCard = ({
1244
1278
  variant = "default",
1245
- radius = "md",
1279
+ radius = "full",
1246
1280
  avatar,
1247
- avatarIcon,
1248
1281
  title,
1249
1282
  subtitle,
1250
1283
  button,
1251
1284
  content,
1252
- media,
1253
1285
  tags,
1254
- timestamp,
1255
1286
  className,
1256
1287
  metrics
1257
1288
  }) => {
@@ -1262,10 +1293,19 @@ var SocialMediaCard = ({
1262
1293
  className: `social-media-card ${SocialMediaCard_module_default[`social-media-card-radius--${radius}`]} ${SocialMediaCard_module_default[`social-media-radius-variant--${variant}`]} ${SocialMediaCard_module_default["social-media-card"]} ${className}`,
1263
1294
  children: [
1264
1295
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: SocialMediaCard_module_default["social-media-card__header"], children: [
1265
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: SocialMediaCard_module_default["social-media-card__avatar"] }),
1296
+ avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1297
+ import_button.Button,
1298
+ {
1299
+ className: SocialMediaCard_module_default["social-media-card__avatar"],
1300
+ style: { background: avatar == null ? void 0 : avatar.background },
1301
+ href: avatar == null ? void 0 : avatar.href,
1302
+ target: avatar == null ? void 0 : avatar.target,
1303
+ children: renderAvatar(avatar)
1304
+ }
1305
+ ),
1266
1306
  title && subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: SocialMediaCard_module_default["social-media-card__text"], children: [
1267
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: title }),
1268
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: subtitle })
1307
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: SocialMediaCard_module_default["social-media-card__title"], children: title }),
1308
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: SocialMediaCard_module_default["social-media-card__subtitle"], children: subtitle })
1269
1309
  ] }),
1270
1310
  button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1271
1311
  import_button.Button,
@@ -1278,13 +1318,21 @@ var SocialMediaCard = ({
1278
1318
  )
1279
1319
  ] }),
1280
1320
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: SocialMediaCard_module_default["social-media-card__content"], children: content }),
1281
- metrics && metrics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: SocialMediaCard_module_default["social-media-card__metrics"], children: metrics.map(({ icon, label, value }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: SocialMediaCard_module_default["social-media-card__metric"], children: [
1321
+ tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: SocialMediaCard_module_default["social-media-card__tags"], children: tags.map(({ variant: tagVariant, ...rest }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: SocialMediaCard_module_default["social-media-card__tag"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1322
+ import_anchor.Anchor,
1323
+ {
1324
+ ...rest,
1325
+ className: SocialMediaCard_module_default["social-media-card__tag-anchor"],
1326
+ variant: tagVariant || "white"
1327
+ }
1328
+ ) }, i)) }),
1329
+ metrics && metrics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: SocialMediaCard_module_default["social-media-card__metrics"], children: metrics.map(({ icon, label, value, ...rest }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: SocialMediaCard_module_default["social-media-card__metric"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { ...rest, transparent: true, children: [
1282
1330
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: SocialMediaCard_module_default["social-media-card__metric-par"], children: [
1283
- icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: SocialMediaCard_module_default["social-media-card__metric-icon"], children: icon() }),
1331
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: SocialMediaCard_module_default["social-media-card__metric-icon"], children: renderIcon(icon) }),
1284
1332
  value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: SocialMediaCard_module_default["social-media-card__metric-value"], children: value })
1285
1333
  ] }),
1286
1334
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: SocialMediaCard_module_default["social-media-card__metrics-label"], children: label })
1287
- ] }, i)) })
1335
+ ] }) }, i)) })
1288
1336
  ]
1289
1337
  },
1290
1338
  uniqId