@x-plat/design-system 0.7.0 → 0.7.2

package/dist/index.css

@@ -1450,7 +1450,7 @@
   overflow: hidden;
   background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -1574,82 +1574,6 @@
   height: 60%;
 }
 
-/* src/components/Badge/badge.scss */
-.lib-xplat-badge {
-  position: relative;
-  display: inline-flex;
-}
-.lib-xplat-badge.sm .badge-indicator {
-  min-width: var(--spacing-space-4);
-  height: var(--spacing-space-4);
-  font-family: var(--semantic-typo-caption-2-r-font);
-  font-size: var(--semantic-typo-caption-2-r-size);
-  line-height: var(--semantic-typo-caption-2-r-lh);
-  font-weight: var(--semantic-typo-caption-2-r-weight);
-  letter-spacing: var(--semantic-typo-caption-2-r-ls);
-  padding: 0 var(--spacing-space-1);
-}
-.lib-xplat-badge.sm .badge-indicator.dot {
-  min-width: var(--spacing-space-2);
-  height: var(--spacing-space-2);
-}
-.lib-xplat-badge.lg .badge-indicator {
-  min-width: var(--spacing-space-6);
-  height: var(--spacing-space-6);
-  font-family: var(--semantic-typo-caption-1-r-font);
-  font-size: var(--semantic-typo-caption-1-r-size);
-  line-height: var(--semantic-typo-caption-1-r-lh);
-  font-weight: var(--semantic-typo-caption-1-r-weight);
-  letter-spacing: var(--semantic-typo-caption-1-r-ls);
-  padding: 0 var(--spacing-space-2);
-}
-.lib-xplat-badge.lg .badge-indicator.dot {
-  min-width: var(--spacing-space-2);
-  height: var(--spacing-space-2);
-}
-.lib-xplat-badge .badge-indicator {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--spacing-radius-full);
-  color: var(--semantic-text-inverse);
-  font-family: var(--semantic-typo-caption-2-sb-font);
-  font-size: var(--semantic-typo-caption-2-sb-size);
-  line-height: var(--semantic-typo-caption-2-sb-lh);
-  font-weight: var(--semantic-typo-caption-2-sb-weight);
-  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
-  line-height: 1;
-  min-width: var(--spacing-space-4);
-  height: var(--spacing-space-4);
-  padding: 0 var(--spacing-space-1);
-  box-sizing: border-box;
-}
-.lib-xplat-badge .badge-indicator.dot {
-  min-width: var(--spacing-space-2);
-  height: var(--spacing-space-2);
-  padding: 0;
-}
-.lib-xplat-badge .badge-indicator.error {
-  background-color: var(--semantic-surface-error-default);
-}
-.lib-xplat-badge .badge-indicator.success {
-  background-color: var(--semantic-surface-success-default);
-}
-.lib-xplat-badge .badge-indicator.warning {
-  background-color: var(--semantic-surface-warning-default);
-  color: var(--semantic-text-primary);
-}
-.lib-xplat-badge .badge-indicator.info {
-  background-color: var(--semantic-surface-info-default);
-}
-.lib-xplat-badge .badge-indicator.brand {
-  background-color: var(--semantic-surface-brand-default);
-}
-
 /* src/components/Box/box.scss */
 .lib-xplat-box {
   contain: layout style;
@@ -2468,7 +2392,7 @@
   border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-lg);
   background-color: var(--semantic-surface-neutral-primary);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -2700,7 +2624,7 @@
   background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -3878,6 +3802,82 @@
   cursor: pointer;
 }
 
+/* src/components/NotificationBadge/notificationBadge.scss */
+.lib-xplat-notification-badge {
+  position: relative;
+  display: inline-flex;
+}
+.lib-xplat-notification-badge.sm .badge-indicator {
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  padding: 0 var(--spacing-space-1);
+}
+.lib-xplat-notification-badge.sm .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+}
+.lib-xplat-notification-badge.lg .badge-indicator {
+  min-width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  padding: 0 var(--spacing-space-2);
+}
+.lib-xplat-notification-badge.lg .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+}
+.lib-xplat-notification-badge .badge-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--spacing-radius-full);
+  color: var(--semantic-text-inverse);
+  font-family: var(--semantic-typo-caption-2-sb-font);
+  font-size: var(--semantic-typo-caption-2-sb-size);
+  line-height: var(--semantic-typo-caption-2-sb-lh);
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
+  line-height: 1;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  padding: 0 var(--spacing-space-1);
+  box-sizing: border-box;
+}
+.lib-xplat-notification-badge .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+  padding: 0;
+}
+.lib-xplat-notification-badge .badge-indicator.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-notification-badge .badge-indicator.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-notification-badge .badge-indicator.warning {
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-primary);
+}
+.lib-xplat-notification-badge .badge-indicator.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-notification-badge .badge-indicator.brand {
+  background-color: var(--semantic-surface-brand-default);
+}
+
 /* src/components/Pagination/pagination.scss */
 .lib-xplat-pagination {
   display: inline-flex;
@@ -4237,7 +4237,7 @@
   border-radius: var(--spacing-radius-md);
   background-color: var(--semantic-surface-neutral-primary);
   color: var(--semantic-text-primary);
-  transition: border-color 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-select .select-trigger:hover:not(.disabled) {
   border-color: var(--semantic-border-tertiary);
@@ -4246,7 +4246,9 @@
   border-color: var(--semantic-interaction-focus-ring);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--semantic-interaction-focus-ring);
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {
@@ -5197,7 +5199,7 @@
   color: var(--semantic-text-secondary);
   font-family: inherit;
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.sm {
   padding: var(--spacing-space-2) var(--spacing-space-3);

package/dist/index.d.cts

@@ -3,7 +3,6 @@ export { Accordion } from './components/Accordion/index.cjs';
 export { Alert } from './components/Alert/index.cjs';
 export { AutoResizeTextArea } from './components/AutoResizeTextArea/index.cjs';
 export { Avatar } from './components/Avatar/index.cjs';
-export { Badge } from './components/Badge/index.cjs';
 export { Box } from './components/Box/index.cjs';
 export { Breadcrumb } from './components/Breadcrumb/index.cjs';
 export { Button } from './components/Button/index.cjs';
@@ -25,6 +24,7 @@ export { IconButton } from './components/IconButton/index.cjs';
 export { ImageSelector } from './components/ImageSelector/index.cjs';
 export { Input, PasswordInput } from './components/Input/index.cjs';
 export { Modal } from './components/Modal/index.cjs';
+export { NotificationBadge as Badge, NotificationBadge } from './components/NotificationBadge/index.cjs';
 export { Pagination } from './components/Pagination/index.cjs';
 export { PopOver } from './components/PopOver/index.cjs';
 export { Progress } from './components/Progress/index.cjs';

package/dist/index.d.ts

@@ -3,7 +3,6 @@ export { Accordion } from './components/Accordion/index.js';
 export { Alert } from './components/Alert/index.js';
 export { AutoResizeTextArea } from './components/AutoResizeTextArea/index.js';
 export { Avatar } from './components/Avatar/index.js';
-export { Badge } from './components/Badge/index.js';
 export { Box } from './components/Box/index.js';
 export { Breadcrumb } from './components/Breadcrumb/index.js';
 export { Button } from './components/Button/index.js';
@@ -25,6 +24,7 @@ export { IconButton } from './components/IconButton/index.js';
 export { ImageSelector } from './components/ImageSelector/index.js';
 export { Input, PasswordInput } from './components/Input/index.js';
 export { Modal } from './components/Modal/index.js';
+export { NotificationBadge as Badge, NotificationBadge } from './components/NotificationBadge/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PopOver } from './components/PopOver/index.js';
 export { Progress } from './components/Progress/index.js';