@aristobyte-ui/presets 1.0.34 → 1.0.36

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 +85 -6
  4. package/dist/index.d.ts +85 -6
  5. package/dist/index.js +55 -11
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +55 -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// Logo\n$logo-color-1: #ffee27;\n$logo-color-2: #fec800;\n$logo-color-3: #f18e35;\n$logo-color-4: #e95f32;\n$logo-color-5: #e2312d;\n$logo-gradient: linear-gradient(\n 90deg,\n $logo-color-1,\n $logo-color-2,\n $logo-color-3,\n $logo-color-4,\n $logo-color-5\n);\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,cCoJA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,IAAA,IAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;ADnJA,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,SClCE;ADmCF,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,SCvDI;ADwDJ,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAGF,CAAAC;AACE,SC4DkB;AD3DlB,aAAA;AACA,cAAA;AACA,eAAA;AACA,eAAA;;AAGF,CAAAC;AACE,SCqDqB;ADpDrB,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,SCkBY;ADjBZ,WAAA;AACA,mBAAA;;AAGF,CAAAC;AACE,SCYY;ADXZ,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,296 +1,375 @@
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 {
7
+ disabled?: boolean;
5
8
  }
6
9
  declare const ActionButtons: React.FC<IActionButtons>;
7
10
 
8
11
  interface IActivityFeed {
12
+ disabled?: boolean;
9
13
  }
10
14
  declare const ActivityFeed: React.FC<IActivityFeed>;
11
15
 
12
16
  interface IAIAssistant {
17
+ disabled?: boolean;
13
18
  }
14
19
  declare const AIAssistant: React.FC<IAIAssistant>;
15
20
 
16
21
  interface IAnalyticsDashboard {
22
+ disabled?: boolean;
17
23
  }
18
24
  declare const AnalyticsDashboard: React.FC<IAnalyticsDashboard>;
19
25
 
20
26
  interface IBudgetTracker {
27
+ disabled?: boolean;
21
28
  }
22
29
  declare const BudgetTracker: React.FC<IBudgetTracker>;
23
30
 
24
31
  interface ICalendarWidget {
32
+ disabled?: boolean;
25
33
  }
26
34
  declare const CalendarWidget: React.FC<ICalendarWidget>;
27
35
 
28
36
  interface IChatMessages {
37
+ disabled?: boolean;
29
38
  }
30
39
  declare const ChatMessages: React.FC<IChatMessages>;
31
40
 
32
41
  interface ICloudStorage {
42
+ disabled?: boolean;
33
43
  }
34
44
  declare const CloudStorage: React.FC<ICloudStorage>;
35
45
 
36
46
  interface ICodeEditor {
47
+ disabled?: boolean;
37
48
  }
38
49
  declare const CodeEditor: React.FC<ICodeEditor>;
39
50
 
40
51
  interface ICodeStats {
52
+ disabled?: boolean;
41
53
  }
42
54
  declare const CodeStats: React.FC<ICodeStats>;
43
55
 
44
56
  interface IColorPaletteWidget {
57
+ disabled?: boolean;
45
58
  }
46
59
  declare const ColorPaletteWidget: React.FC<IColorPaletteWidget>;
47
60
 
48
61
  interface IContactCard {
62
+ disabled?: boolean;
49
63
  }
50
64
  declare const ContactCard: React.FC<IContactCard>;
51
65
 
52
66
  interface ICryptocurrencyWidget {
67
+ disabled?: boolean;
53
68
  }
54
69
  declare const CryptocurrencyWidget: React.FC<ICryptocurrencyWidget>;
55
70
 
56
71
  interface IDatabaseWidget {
72
+ disabled?: boolean;
57
73
  }
58
74
  declare const DatabaseWidget: React.FC<IDatabaseWidget>;
59
75
 
60
76
  interface IDesignSystem {
77
+ disabled?: boolean;
61
78
  }
62
79
  declare const DesignSystem: React.FC<IDesignSystem>;
63
80
 
64
81
  interface IDeviceStatus {
82
+ disabled?: boolean;
65
83
  }
66
84
  declare const DeviceStatus: React.FC<IDeviceStatus>;
67
85
 
68
86
  interface IDocumentScanner {
87
+ disabled?: boolean;
69
88
  }
70
89
  declare const DocumentScanner: React.FC<IDocumentScanner>;
71
90
 
72
91
  interface IEmailDashboard {
92
+ disabled?: boolean;
73
93
  }
74
94
  declare const EmailDashboard: React.FC<IEmailDashboard>;
75
95
 
76
96
  interface IEnergyMeter {
97
+ disabled?: boolean;
77
98
  }
78
99
  declare const EnergyMeter: React.FC<IEnergyMeter>;
79
100
 
80
101
  interface IFileManager {
102
+ disabled?: boolean;
81
103
  }
82
104
  declare const FileManager: React.FC<IFileManager>;
83
105
 
84
106
  interface IFileUploadArea {
107
+ disabled?: boolean;
85
108
  }
86
109
  declare const FileUploadArea: React.FC<IFileUploadArea>;
87
110
 
88
111
  interface IFitnessTracker {
112
+ disabled?: boolean;
89
113
  }
90
114
  declare const FitnessTracker: React.FC<IFitnessTracker>;
91
115
 
92
116
  interface IGamingControllerWidget {
117
+ disabled?: boolean;
93
118
  }
94
119
  declare const GamingControllerWidget: React.FC<IGamingControllerWidget>;
95
120
 
96
121
  interface IHabitTracker {
122
+ disabled?: boolean;
97
123
  }
98
124
  declare const HabitTracker: React.FC<IHabitTracker>;
99
125
 
100
126
  interface IHealthMonitor {
127
+ disabled?: boolean;
101
128
  }
102
129
  declare const HealthMonitor: React.FC<IHealthMonitor>;
103
130
 
104
131
  interface IIdeaBulbWidget {
132
+ disabled?: boolean;
105
133
  }
106
134
  declare const IdeaBulbWidget: React.FC<IIdeaBulbWidget>;
107
135
 
108
136
  interface IInspirationWidget {
137
+ disabled?: boolean;
109
138
  }
110
139
  declare const InspirationWidget: React.FC<IInspirationWidget>;
111
140
 
112
141
  interface ILanguageLearning {
142
+ disabled?: boolean;
113
143
  }
114
144
  declare const LanguageLearning: React.FC<ILanguageLearning>;
115
145
 
116
146
  interface ILayerStackWidget {
147
+ disabled?: boolean;
117
148
  }
118
149
  declare const LayerStackWidget: React.FC<ILayerStackWidget>;
119
150
 
120
151
  interface IMediaControls {
152
+ disabled?: boolean;
121
153
  }
122
154
  declare const MediaControls: React.FC<IMediaControls>;
123
155
 
124
156
  interface IMiniMenu {
157
+ disabled?: boolean;
125
158
  }
126
159
  declare const MiniMenu: React.FC<IMiniMenu>;
127
160
 
128
161
  interface IMouseTracker {
162
+ disabled?: boolean;
129
163
  }
130
164
  declare const MouseTracker: React.FC<IMouseTracker>;
131
165
 
132
166
  interface IMusicPlayer {
167
+ disabled?: boolean;
133
168
  }
134
169
  declare const MusicPlayer: React.FC<IMusicPlayer>;
135
170
 
136
171
  interface IMusicProduction {
172
+ disabled?: boolean;
137
173
  }
138
174
  declare const MusicProduction: React.FC<IMusicProduction>;
139
175
 
140
176
  interface INatureWidget {
177
+ disabled?: boolean;
141
178
  }
142
179
  declare const NatureWidget: React.FC<INatureWidget>;
143
180
 
144
181
  interface INavigationPills {
182
+ disabled?: boolean;
145
183
  }
146
184
  declare const NavigationPills: React.FC<INavigationPills>;
147
185
 
148
186
  interface INetworkStatus {
187
+ disabled?: boolean;
149
188
  }
150
189
  declare const NetworkStatus: React.FC<INetworkStatus>;
151
190
 
152
191
  interface INotificationBadges {
192
+ disabled?: boolean;
153
193
  }
154
194
  declare const NotificationBadges: React.FC<INotificationBadges>;
155
195
 
156
196
  interface INotificationCards {
197
+ disabled?: boolean;
157
198
  }
158
199
  declare const NotificationCards: React.FC<INotificationCards>;
159
200
 
160
201
  interface IOfficeBuildingWidget {
202
+ disabled?: boolean;
161
203
  }
162
204
  declare const OfficeBuildingWidget: React.FC<IOfficeBuildingWidget>;
163
205
 
164
206
  interface IPasswordManager {
207
+ disabled?: boolean;
165
208
  }
166
209
  declare const PasswordManager: React.FC<IPasswordManager>;
167
210
 
168
211
  interface IPhotoEditor {
212
+ disabled?: boolean;
169
213
  }
170
214
  declare const PhotoEditor: React.FC<IPhotoEditor>;
171
215
 
172
216
  interface IPomodoroTimer {
217
+ disabled?: boolean;
173
218
  }
174
219
  declare const PomodoroTimer: React.FC<IPomodoroTimer>;
175
220
 
176
221
  interface IPricingCard {
222
+ disabled?: boolean;
177
223
  }
178
224
  declare const PricingCard: React.FC<IPricingCard>;
179
225
 
180
226
  interface IProfileBadge {
227
+ disabled?: boolean;
181
228
  }
182
229
  declare const ProfileBadge: React.FC<IProfileBadge>;
183
230
 
184
231
  interface IProgressTracker {
232
+ disabled?: boolean;
185
233
  }
186
234
  declare const ProgressTracker: React.FC<IProgressTracker>;
187
235
 
188
236
  interface IQuickActions {
237
+ disabled?: boolean;
189
238
  }
190
239
  declare const QuickActions: React.FC<IQuickActions>;
191
240
 
192
241
  interface IQuickStats {
242
+ disabled?: boolean;
193
243
  }
194
244
  declare const QuickStats: React.FC<IQuickStats>;
195
245
 
196
246
  interface IReadingProgress {
247
+ disabled?: boolean;
197
248
  }
198
249
  declare const ReadingProgress: React.FC<IReadingProgress>;
199
250
 
200
251
  interface IRecipeFinder {
252
+ disabled?: boolean;
201
253
  }
202
254
  declare const RecipeFinder: React.FC<IRecipeFinder>;
203
255
 
204
256
  interface IRocketLaunchWidget {
257
+ disabled?: boolean;
205
258
  }
206
259
  declare const RocketLaunchWidget: React.FC<IRocketLaunchWidget>;
207
260
 
208
261
  interface ISettingsPanel {
262
+ disabled?: boolean;
209
263
  }
210
264
  declare const SettingsPanel: React.FC<ISettingsPanel>;
211
265
 
212
266
  interface IShoppingCart {
267
+ disabled?: boolean;
213
268
  }
214
269
  declare const ShoppingCart: React.FC<IShoppingCart>;
215
270
 
216
271
  interface IShoppingList {
272
+ disabled?: boolean;
217
273
  }
218
274
  declare const ShoppingList: React.FC<IShoppingList>;
219
275
 
220
276
  interface ISocialEngagement {
277
+ disabled?: boolean;
221
278
  }
222
279
  declare const SocialEngagement: React.FC<ISocialEngagement>;
223
280
 
224
281
  interface ISocialMediaCard {
225
282
  variant?: "default" | "compact" | "highlight";
226
283
  radius?: "none" | "sm" | "md" | "lg" | "full";
227
- avatar?: string;
228
- avatarIcon?: () => React.JSX.Element;
284
+ avatar?: {
285
+ onClick?: () => void;
286
+ href?: string;
287
+ target?: "_self" | "_blank" | "_parent" | "_top";
288
+ image?: string;
289
+ imageAltText?: string;
290
+ icon?: (props: IconPropsType) => React.JSX.Element;
291
+ background?: string;
292
+ };
229
293
  title?: string;
230
294
  subtitle?: string;
231
295
  button?: IButton;
232
296
  content?: React.ReactElement | React.ReactNode | string;
233
- media?: React.ReactNode;
234
- tags?: string[];
235
- timestamp?: string | Date;
297
+ tags?: IAnchor[];
236
298
  metrics?: {
237
- icon?: () => React.JSX.Element;
299
+ onClick?: () => void;
300
+ href?: string;
301
+ target?: "_self" | "_blank" | "_parent" | "_top";
302
+ icon?: (props: IconPropsType) => React.JSX.Element;
238
303
  label?: string;
239
304
  value?: string;
240
305
  }[];
306
+ disabled?: boolean;
241
307
  className?: string;
242
308
  }
243
309
  declare const SocialMediaCard: React.FC<ISocialMediaCard>;
244
310
 
245
311
  interface IStatisticsCards {
312
+ disabled?: boolean;
246
313
  }
247
314
  declare const StatisticsCards: React.FC<IStatisticsCards>;
248
315
 
249
316
  interface IStatusIndicators {
317
+ disabled?: boolean;
250
318
  }
251
319
  declare const StatusIndicators: React.FC<IStatusIndicators>;
252
320
 
253
321
  interface IStockMarket {
322
+ disabled?: boolean;
254
323
  }
255
324
  declare const StockMarket: React.FC<IStockMarket>;
256
325
 
257
326
  interface IStreakCounter {
327
+ disabled?: boolean;
258
328
  }
259
329
  declare const StreakCounter: React.FC<IStreakCounter>;
260
330
 
261
331
  interface ISystemStatus {
332
+ disabled?: boolean;
262
333
  }
263
334
  declare const SystemStatus: React.FC<ISystemStatus>;
264
335
 
265
336
  interface ITaskManager {
337
+ disabled?: boolean;
266
338
  }
267
339
  declare const TaskManager: React.FC<ITaskManager>;
268
340
 
269
341
  interface ITeamCollaborationWidget {
342
+ disabled?: boolean;
270
343
  }
271
344
  declare const TeamCollaborationWidget: React.FC<ITeamCollaborationWidget>;
272
345
 
273
346
  interface ITimeLocationWidget {
347
+ disabled?: boolean;
274
348
  }
275
349
  declare const TimeLocationWidget: React.FC<ITimeLocationWidget>;
276
350
 
277
351
  interface ITodoList {
352
+ disabled?: boolean;
278
353
  }
279
354
  declare const TodoList: React.FC<ITodoList>;
280
355
 
281
356
  interface IToolWidget {
357
+ disabled?: boolean;
282
358
  }
283
359
  declare const ToolWidget: React.FC<IToolWidget>;
284
360
 
285
361
  interface ITravelPlanner {
362
+ disabled?: boolean;
286
363
  }
287
364
  declare const TravelPlanner: React.FC<ITravelPlanner>;
288
365
 
289
366
  interface IVideoCallWidget {
367
+ disabled?: boolean;
290
368
  }
291
369
  declare const VideoCallWidget: React.FC<IVideoCallWidget>;
292
370
 
293
371
  interface IWeatherWidget {
372
+ disabled?: boolean;
294
373
  }
295
374
  declare const WeatherWidget: React.FC<IWeatherWidget>;
296
375