@x-plat/design-system 0.5.20 → 0.5.22

package/dist/components/index.css

@@ -1664,6 +1664,140 @@
   font-weight: 600;
 }
 
+/* src/components/TextArea/textArea.scss */
+.lib-xplat-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  min-height: var(--spacing-control-height-md);
+  overflow: hidden;
+  background-color: var(--semantic-surface-neutral-default);
+  width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
+  background-color: var(--semantic-surface-neutral-disabled);
+  cursor: not-allowed;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
+  border: none;
+  outline: none;
+  flex: 1;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-4);
+  width: 100%;
+  color: var(--semantic-text-subtle);
+  resize: none;
+  height: 1.5em;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
+  cursor: not-allowed;
+}
+
+/* src/components/ChatInput/chatInput.scss */
+.lib-xplat-chat-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-3);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-lg);
+  background-color: var(--semantic-surface-neutral-default);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-chat-input:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-chat-input.disabled {
+  background-color: var(--semantic-surface-neutral-subtle);
+  border-color: var(--semantic-border-default);
+  cursor: not-allowed;
+}
+.lib-xplat-chat-input .chat-input-textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  min-height: var(--spacing-control-height-lg);
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--semantic-text-strong);
+  background: transparent;
+}
+.lib-xplat-chat-input .chat-input-textarea::placeholder {
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-chat-input .chat-input-textarea:disabled {
+  cursor: not-allowed;
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-chat-input .chat-input-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-control-height-lg);
+  height: var(--spacing-control-height-lg);
+  border: none;
+  border-radius: var(--spacing-radius-md);
+  cursor: pointer;
+  font-size: 20px;
+  transition: background-color 0.15s, opacity 0.15s;
+}
+.lib-xplat-chat-input .chat-input-send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.lib-xplat-chat-input .chat-input-send:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-chat-input .chat-input-send.btn-primary {
+  background-color: var(--semantic-surface-brand-default);
+  color: var(--semantic-text-inverse);
+}
+.lib-xplat-chat-input .chat-input-send.btn-primary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-chat-input .chat-input-send.btn-secondary {
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-surface-brand-default);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chat-input .chat-input-send.btn-secondary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-chat-input .chat-input-send.btn-text {
+  background-color: transparent;
+  color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-chat-input .chat-input-send.btn-text:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+
 /* src/components/Box/box.scss */
 .lib-xplat-box {
   contain: layout style;
@@ -1864,7 +1998,7 @@
     transform 0.15s ease-out;
   transform-origin: center;
 }
-.lib-xplat-chart .chart-svg:hover .chart-slice {
+.lib-xplat-chart .chart-pie:has(.chart-slice:hover) .chart-slice {
   opacity: 0.5;
 }
 .lib-xplat-chart .chart-slice:hover {
@@ -1892,10 +2026,8 @@
 .lib-xplat-chart .chart-bar-animate {
   animation: chart-bar-grow 800ms ease-out both;
 }
-.lib-xplat-chart .chart-slice-group-animate {
-  animation: chart-slice-in 1000ms ease-out both;
-}
 .lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
   animation: chart-fade-in 150ms ease-out both;
 }
 .lib-xplat-chart .chart-area[style*=animationDelay] {
@@ -1909,16 +2041,6 @@
     transform: scaleY(1);
   }
 }
-@keyframes chart-slice-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
 @keyframes chart-fade-in {
   from {
     opacity: 0;
@@ -1939,7 +2061,6 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
-  .lib-xplat-chart .chart-slice-group-animate,
   .lib-xplat-chart .chart-pie-label-animate,
   .lib-xplat-chart .chart-area {
     animation: none !important;
@@ -3734,6 +3855,27 @@
   position: relative;
   overflow: auto;
 }
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-size: 12px;
+}
+.lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
+}
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  font-size: 16px;
+}
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;
   min-width: 600px;
@@ -3794,6 +3936,102 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
   background-color: var(--semantic-surface-neutral-subtle);
 }
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th.cell-hover:hover {
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th.cell-hover:hover {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
+  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th.cell-hover:hover {
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
+  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th.cell-hover:hover {
+  background-color: var(--semantic-surface-info-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-strong);
+}
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
   cursor: pointer;
@@ -3981,52 +4219,6 @@
   font-size: 14px;
 }
 
-/* src/components/TextArea/textArea.scss */
-.lib-xplat-textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-space-2);
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--semantic-border-default);
-  border-radius: var(--spacing-radius-md);
-  min-height: var(--spacing-control-height-md);
-  overflow: hidden;
-  background-color: var(--semantic-surface-neutral-default);
-  width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
-  border-color: var(--semantic-interaction-focus-ring);
-  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-strong);
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
-  background-color: var(--semantic-surface-neutral-disabled);
-  cursor: not-allowed;
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
-  border: none;
-  outline: none;
-  flex: 1;
-  padding-left: var(--spacing-space-4);
-  padding-right: var(--spacing-space-4);
-  width: 100%;
-  color: var(--semantic-text-subtle);
-  resize: none;
-  height: 1.5em;
-}
-.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
-  cursor: not-allowed;
-}
-
 /* src/components/Toast/toast.scss */
 .lib-xplat-toast-container {
   position: fixed;

package/dist/components/index.d.cts

@@ -5,6 +5,7 @@ export { Badge } from './Badge/index.cjs';
 export { Breadcrumb } from './Breadcrumb/index.cjs';
 export { Button } from './Button/index.cjs';
 export { Calendar, CalendarDay, CalendarEvent, CalendarProps, isInRange, isSameDay, useCalendar } from './Calendar/index.cjs';
+export { ChatInput } from './ChatInput/index.cjs';
 export { Box } from './Box/index.cjs';
 export { CardTab } from './CardTab/index.cjs';
 export { Chart } from './Chart/index.cjs';

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export { Badge } from './Badge/index.js';
 export { Breadcrumb } from './Breadcrumb/index.js';
 export { Button } from './Button/index.js';
 export { Calendar, CalendarDay, CalendarEvent, CalendarProps, isInRange, isSameDay, useCalendar } from './Calendar/index.js';
+export { ChatInput } from './ChatInput/index.js';
 export { Box } from './Box/index.js';
 export { CardTab } from './CardTab/index.js';
 export { Chart } from './Chart/index.js';