@segmentify/ui 0.0.47 → 0.0.48

package/dist/types/messaging.d.ts

@@ -0,0 +1,34 @@
+export type MessageFormat = 'TEXT' | 'IMAGE';
+export type MessageButtonType = 'URL' | 'PHONE_NUMBER' | 'QUICK_REPLY';
+export type MessageButton = {
+    text: string;
+    type?: MessageButtonType;
+    url?: string;
+};
+export type MessageHeader = {
+    format: MessageFormat;
+    text?: string;
+    image?: string;
+};
+export type MessageBody = {
+    text: string;
+};
+export type MessageFooter = {
+    text: string;
+};
+export type MessageCarouselCard = {
+    body: {
+        text: string;
+    };
+    buttons: MessageButton[];
+    header?: MessageHeader;
+};
+export type MessagingPhoneProps = {
+    header?: MessageHeader;
+    body: MessageBody;
+    footer?: MessageFooter;
+    buttons?: MessageButton[];
+    carousel?: {
+        cards: MessageCarouselCard[];
+    };
+};

package/dist/ui.css

@@ -36,11 +36,13 @@
   --ui-color-rose-600: oklch(58.6% 0.253 17.585);
   --ui-color-slate-50: oklch(98.4% 0.003 247.858);
   --ui-color-slate-200: oklch(92.9% 0.013 255.508);
+  --ui-color-gray-100: #f4f5f7;
   --ui-color-gray-200: #e5e7eb;
   --ui-color-gray-300: #d2d6dc;
   --ui-color-gray-400: #9fa6b2;
   --ui-color-gray-500: #6b7280;
   --ui-color-gray-600: #4b5563;
+  --ui-color-gray-800: #252f3f;
   --ui-color-zinc-50: oklch(98.5% 0 0);
   --ui-color-neutral-500: oklch(55.6% 0 0);
   --ui-color-neutral-700: oklch(37.1% 0 0);
@@ -118,6 +120,7 @@
   --ui-color-kashmir-blue-200: #d1dbe6;
   --ui-color-kashmir-blue-500: #547494;
   --ui-color-kashmir-blue-600: #466283;
+  --ui-color-gray-650: #0a0a0a;
   --ui-color-black-250: #71717a;
   --ui-color-black-900: #09090b;
   --ui-color-black-950: #18181b;
@@ -170,6 +173,12 @@
 .ui\:inset-y-0 {
   inset-block: calc(var(--ui-spacing) * 0);
 }
+.ui\:-start-\[17px\] {
+  inset-inline-start: calc(17px * -1);
+}
+.ui\:-end-\[17px\] {
+  inset-inline-end: calc(17px * -1);
+}
 .ui\:-top-12 {
   top: calc(var(--ui-spacing) * -12);
 }
@@ -194,6 +203,15 @@
 .ui\:top-\[50\%\] {
   top: 50%;
 }
+.ui\:top-\[124px\] {
+  top: 124px;
+}
+.ui\:top-\[142px\] {
+  top: 142px;
+}
+.ui\:top-\[178px\] {
+  top: 178px;
+}
 .ui\:-right-12 {
   right: calc(var(--ui-spacing) * -12);
 }
@@ -221,6 +239,9 @@
 .ui\:bottom-4 {
   bottom: calc(var(--ui-spacing) * 4);
 }
+.ui\:bottom-\[40px\] {
+  bottom: 40px;
+}
 .ui\:-left-12 {
   left: calc(var(--ui-spacing) * -12);
 }
@@ -236,6 +257,9 @@
 .ui\:left-5 {
   left: calc(var(--ui-spacing) * 5);
 }
+.ui\:left-\[5\%\] {
+  left: 5%;
+}
 .ui\:left-\[50\%\] {
   left: 50%;
 }
@@ -530,12 +554,27 @@
 .ui\:h-\[1\.15rem\] {
   height: 1.15rem;
 }
+.ui\:h-\[18px\] {
+  height: 18px;
+}
+.ui\:h-\[46px\] {
+  height: 46px;
+}
+.ui\:h-\[64px\] {
+  height: 64px;
+}
 .ui\:h-\[120px\] {
   height: 120px;
 }
 .ui\:h-\[200px\] {
   height: 200px;
 }
+.ui\:h-\[572px\] {
+  height: 572px;
+}
+.ui\:h-\[600px\] {
+  height: 600px;
+}
 .ui\:h-\[calc\(--spacing\(5\.5\)\)\] {
   height: calc(calc(var(--ui-spacing) * 5.5));
 }
@@ -572,6 +611,9 @@
 .ui\:max-h-\[80vh\] {
   max-height: 80vh;
 }
+.ui\:max-h-\[100px\] {
+  max-height: 100px;
+}
 .ui\:max-h-\[300px\] {
   max-height: 300px;
 }
@@ -662,9 +704,15 @@
 .ui\:w-80 {
   width: calc(var(--ui-spacing) * 80);
 }
+.ui\:w-\[3px\] {
+  width: 3px;
+}
 .ui\:w-\[100px\] {
   width: 100px;
 }
+.ui\:w-\[148px\] {
+  width: 148px;
+}
 .ui\:w-\[180px\] {
   width: 180px;
 }
@@ -674,12 +722,21 @@
 .ui\:w-\[240px\] {
   width: 240px;
 }
+.ui\:w-\[272px\] {
+  width: 272px;
+}
 .ui\:w-\[280px\] {
   width: 280px;
 }
+.ui\:w-\[300px\] {
+  width: 300px;
+}
 .ui\:w-\[350px\] {
   width: 350px;
 }
+.ui\:w-\[calc\(100\%-10\%\)\] {
+  width: calc(100% - 10%);
+}
 .ui\:w-auto {
   width: auto;
 }
@@ -719,6 +776,9 @@
 .ui\:max-w-96 {
   max-width: calc(var(--ui-spacing) * 96);
 }
+.ui\:max-w-\[90\%\] {
+  max-width: 90%;
+}
 .ui\:max-w-\[200px\] {
   max-width: 200px;
 }
@@ -770,9 +830,15 @@
 .ui\:min-w-\[calc\(var\(--anchor-width\)\+--spacing\(7\)\)\] {
   min-width: calc(var(--anchor-width) + calc(var(--ui-spacing) * 7));
 }
+.ui\:flex-0 {
+  flex: 0;
+}
 .ui\:flex-1 {
   flex: 1;
 }
+.ui\:flex-shrink-0 {
+  flex-shrink: 0;
+}
 .ui\:shrink-0 {
   flex-shrink: 0;
 }
@@ -1058,9 +1124,15 @@
 .ui\:rounded {
   border-radius: 0.25rem;
 }
+.ui\:rounded-\[2\.5rem\] {
+  border-radius: 2.5rem;
+}
 .ui\:rounded-\[2px\] {
   border-radius: 2px;
 }
+.ui\:rounded-\[2rem\] {
+  border-radius: 2rem;
+}
 .ui\:rounded-\[4px\] {
   border-radius: 4px;
 }
@@ -1100,6 +1172,14 @@
 .ui\:rounded-xs {
   border-radius: var(--ui-radius-xs);
 }
+.ui\:rounded-s-lg {
+  border-start-start-radius: var(--ui-radius-lg);
+  border-end-start-radius: var(--ui-radius-lg);
+}
+.ui\:rounded-e-lg {
+  border-start-end-radius: var(--ui-radius-lg);
+  border-end-end-radius: var(--ui-radius-lg);
+}
 .ui\:rounded-t-\[10px\] {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
@@ -1108,10 +1188,17 @@
   border-top-left-radius: var(--ui-radius-md);
   border-bottom-left-radius: var(--ui-radius-md);
 }
+.ui\:rounded-tl-none {
+  border-top-left-radius: 0;
+}
 .ui\:rounded-r-md {
   border-top-right-radius: var(--ui-radius-md);
   border-bottom-right-radius: var(--ui-radius-md);
 }
+.ui\:rounded-b-\[1rem\] {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
 .ui\:rounded-b-lg {
   border-bottom-right-radius: var(--ui-radius-lg);
   border-bottom-left-radius: var(--ui-radius-lg);
@@ -1136,6 +1223,10 @@
   border-style: var(--tw-border-style);
   border-width: 1.5px;
 }
+.ui\:border-\[14px\] {
+  border-style: var(--tw-border-style);
+  border-width: 14px;
+}
 .ui\:border-y {
   border-block-style: var(--tw-border-style);
   border-block-width: 1px;
@@ -1195,6 +1286,12 @@
 .ui\:border-gray-200 {
   border-color: var(--ui-color-gray-200);
 }
+.ui\:border-gray-300 {
+  border-color: var(--ui-color-gray-300);
+}
+.ui\:border-gray-800 {
+  border-color: var(--ui-color-gray-800);
+}
 .ui\:border-green-200 {
   border-color: var(--ui-color-green-200);
 }
@@ -1315,12 +1412,18 @@
 .ui\:bg-foreground {
   background-color: var(--ui-color-foreground);
 }
+.ui\:bg-gray-100 {
+  background-color: var(--ui-color-gray-100);
+}
 .ui\:bg-gray-200 {
   background-color: var(--ui-color-gray-200);
 }
 .ui\:bg-gray-500 {
   background-color: var(--ui-color-gray-500);
 }
+.ui\:bg-gray-800 {
+  background-color: var(--ui-color-gray-800);
+}
 .ui\:bg-green-50 {
   background-color: var(--ui-color-green-50);
 }
@@ -1459,6 +1562,9 @@
 .ui\:bg-yellow-500 {
   background-color: var(--ui-color-yellow-500);
 }
+.ui\:bg-whatsapp-bg {
+  background-image: var(--image-whatsapp-bg);
+}
 .ui\:bg-clip-padding {
   background-clip: padding-box;
 }
@@ -1733,6 +1839,9 @@
 .ui\:whitespace-nowrap {
   white-space: nowrap;
 }
+.ui\:whitespace-pre-line {
+  white-space: pre-line;
+}
 .ui\:text-accent-foreground {
   color: var(--ui-color-accent-foreground);
 }
@@ -1760,6 +1869,9 @@
 .ui\:text-black-950\! {
   color: var(--ui-color-black-950) !important;
 }
+.ui\:text-blue-500 {
+  color: var(--ui-color-blue-500);
+}
 .ui\:text-blue-600 {
   color: var(--ui-color-blue-600);
 }
@@ -1790,12 +1902,18 @@
 .ui\:text-foreground {
   color: var(--ui-color-foreground);
 }
+.ui\:text-gray-400 {
+  color: var(--ui-color-gray-400);
+}
 .ui\:text-gray-500 {
   color: var(--ui-color-gray-500);
 }
 .ui\:text-gray-600 {
   color: var(--ui-color-gray-600);
 }
+.ui\:text-gray-650 {
+  color: var(--ui-color-gray-650);
+}
 .ui\:text-green-700 {
   color: var(--ui-color-green-700);
 }
@@ -4199,6 +4317,11 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+.ui\:dark\:border-gray-800 {
+  &:is(.dark *) {
+    border-color: var(--ui-color-gray-800);
+  }
+}
 .ui\:dark\:bg-input\/30 {
   &:is(.dark *) {
     background-color: var(--ui-color-input);
@@ -5012,6 +5135,7 @@
     --ui-sidebar-accent-foreground: 6 87% 61%;
     --ui-sidebar-border: 220 13% 91%;
     --ui-sidebar-ring: 217.2 91.2% 59.8%;
+    --image-whatsapp-bg: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
   }
   .dark {
     --ui-background: 0 0% 3.9%;
@@ -5042,6 +5166,7 @@
     --ui-sidebar-accent-foreground: 240 4.8% 95.9%;
     --ui-sidebar-border: 240 3.7% 15.9%;
     --ui-sidebar-ring: 217.2 91.2% 59.8%;
+    --image-whatsapp-bg: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
   }
 }
 @layer base {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentify/ui",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "A collection of reusable React UI components built with Tailwind CSS and Radix UI",
   "repository": {
     "type": "git",