@ibobbyts/svelte-ui-utils 0.1.2 → 0.2.1

package/dist/style.css

@@ -204,6 +204,69 @@
   font-family: var(--suu-font);
 }
 
+.suu-dropdown-search--multi {
+  display: grid;
+  gap: 8px;
+}
+
+.suu-dropdown-search__selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.suu-dropdown-search__selected-item {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 30px;
+  gap: 6px;
+  padding: 4px 6px 4px 10px;
+  border: 1px solid color-mix(in srgb, var(--suu-color-accent) 34%, var(--suu-color-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--suu-color-accent) 9%, var(--suu-color-bg));
+  color: var(--suu-color-text);
+  font-size: 0.875rem;
+}
+
+.suu-dropdown-search__selected-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suu-dropdown-search__selected-remove {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--suu-color-muted);
+  cursor: pointer;
+}
+
+.suu-dropdown-search__selected-remove:hover,
+.suu-dropdown-search__selected-remove:focus-visible {
+  background: color-mix(in srgb, var(--suu-color-accent) 14%, transparent);
+  color: var(--suu-color-text);
+  outline: none;
+}
+
+.suu-dropdown-search__selected-remove svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
 .suu-dropdown-search__field {
   position: relative;
 }
@@ -322,6 +385,7 @@
 
 .suu-dropdown-search__option {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 2px;
   width: 100%;
   padding: 9px 10px;
@@ -334,6 +398,12 @@
   font: inherit;
 }
 
+.suu-dropdown-search--multi .suu-dropdown-search__option {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 8px;
+}
+
 .suu-dropdown-search__option:last-child {
   border-bottom: 0;
 }
@@ -350,6 +420,37 @@
   opacity: 0.65;
 }
 
+.suu-dropdown-search__option--selected {
+  background: color-mix(in srgb, var(--suu-color-accent) 8%, var(--suu-color-bg));
+}
+
+.suu-dropdown-search__check {
+  display: inline-grid;
+  grid-row: 1 / span 2;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--suu-color-border-strong);
+  border-radius: 4px;
+  color: transparent;
+}
+
+.suu-dropdown-search__check svg {
+  width: 0.76rem;
+  height: 0.76rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.suu-dropdown-search__option--selected .suu-dropdown-search__check {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+  color: var(--suu-color-accent-text);
+}
+
 .suu-dropdown-search__title {
   font-weight: 650;
 }
@@ -790,16 +891,26 @@
   white-space: nowrap;
 }
 
-.suu-table th[data-align='center'],
-.suu-table td[data-align='center'] {
+.suu-table th[data-horizontal-align='center'],
+.suu-table td[data-horizontal-align='center'] {
   text-align: center;
 }
 
-.suu-table th[data-align='right'],
-.suu-table td[data-align='right'] {
+.suu-table th[data-horizontal-align='right'],
+.suu-table td[data-horizontal-align='right'] {
   text-align: right;
 }
 
+.suu-table th[data-vertical-align='middle'],
+.suu-table td[data-vertical-align='middle'] {
+  vertical-align: middle;
+}
+
+.suu-table th[data-vertical-align='bottom'],
+.suu-table td[data-vertical-align='bottom'] {
+  vertical-align: bottom;
+}
+
 .suu-table thead th {
   background: var(--suu-color-surface);
   color: var(--suu-color-text);
@@ -869,6 +980,14 @@
   text-align: inherit;
 }
 
+.suu-table th[data-horizontal-align='center'] .suu-table__sort-button {
+  justify-content: center;
+}
+
+.suu-table th[data-horizontal-align='right'] .suu-table__sort-button {
+  justify-content: flex-end;
+}
+
 .suu-table__sort-button:focus-visible {
   outline: 2px solid var(--suu-color-accent);
   outline-offset: 2px;
@@ -1075,6 +1194,178 @@
   opacity: 0.55;
 }
 
+.suu-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgb(15 23 42 / 0.46);
+  color: var(--suu-color-text);
+  font-family: var(--suu-font);
+}
+
+.suu-modal {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(100%, var(--suu-modal-width, 38rem));
+  max-height: min(720px, calc(100vh - 48px));
+  overflow: hidden;
+  border: 1px solid var(--suu-color-border);
+  border-radius: calc(var(--suu-radius) + 2px);
+  background: var(--suu-color-bg);
+  box-shadow: var(--suu-shadow);
+}
+
+.suu-modal--sm {
+  --suu-modal-width: 30rem;
+}
+
+.suu-modal--md {
+  --suu-modal-width: 42rem;
+}
+
+.suu-modal--lg {
+  --suu-modal-width: 58rem;
+}
+
+.suu-modal:focus {
+  outline: none;
+}
+
+.suu-modal__header,
+.suu-modal__footer {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px 18px;
+}
+
+.suu-modal__header {
+  justify-content: space-between;
+  border-bottom: 1px solid var(--suu-color-border);
+}
+
+.suu-modal__heading {
+  min-width: 0;
+}
+
+.suu-modal__title {
+  margin: 0;
+  color: var(--suu-color-text);
+  font-size: 1.125rem;
+  line-height: 1.3;
+}
+
+.suu-modal__description,
+.suu-confirm-dialog__message {
+  margin: 6px 0 0;
+  color: var(--suu-color-muted);
+  line-height: 1.5;
+}
+
+.suu-modal__close {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--suu-color-muted);
+  cursor: pointer;
+}
+
+.suu-modal__close:hover,
+.suu-modal__close:focus-visible {
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+  outline: none;
+}
+
+.suu-modal__close svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+}
+
+.suu-modal__body {
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+}
+
+.suu-modal__footer {
+  justify-content: flex-end;
+  border-top: 1px solid var(--suu-color-border);
+  background: color-mix(in srgb, var(--suu-color-surface) 64%, var(--suu-color-bg));
+}
+
+.suu-modal__button {
+  min-height: 38px;
+  padding: 7px 14px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 650;
+}
+
+.suu-modal__button:hover:not(:disabled),
+.suu-modal__button:focus-visible {
+  border-color: var(--suu-color-accent);
+  outline: none;
+}
+
+.suu-modal__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.suu-modal__button--primary {
+  border-color: var(--suu-color-accent);
+  background: var(--suu-color-accent);
+  color: var(--suu-color-accent-text);
+}
+
+.suu-modal__button--danger {
+  border-color: var(--suu-color-error);
+  background: var(--suu-color-error);
+  color: #ffffff;
+}
+
+.suu-confirm-dialog__message {
+  margin-top: 0;
+}
+
+@media (max-width: 640px) {
+  .suu-modal-backdrop {
+    align-items: end;
+    padding: 12px;
+  }
+
+  .suu-modal {
+    max-height: calc(100vh - 24px);
+  }
+
+  .suu-modal__footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .suu-modal__button {
+    width: 100%;
+  }
+}
+
 @media (max-width: 640px) {
   .suu-pagination {
     grid-template-columns: 1fr;

package/dist/toast/Toast.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
   import { getUiMessages, type UiLanguage } from '../i18n.js';
   import type { ToastItem } from './types.js';

package/dist/toast/Toast.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAsC5C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,KAAK;WAVoG,SAAS;gBAAc,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAUxH,CAAC;AACzE,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAwC5C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,KAAK;WAVoG,SAAS;gBAAc,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAUxH,CAAC;AACzE,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/toast/ToastManager.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
   import Toast from './Toast.svelte';
   import { groupToastsByPosition, getToastStackDirection, toast as defaultToastStore, TOAST_POSITIONS } from './store.js';

package/dist/toast/ToastManager.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastManager.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/ToastManager.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA6B5D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;YAV8F,UAAU;gBAAc,aAAa,EAAE;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAU9G,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ToastManager.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/ToastManager.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA+B5D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;YAV8F,UAAU;gBAAc,aAAa,EAAE;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAU9G,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Reusable Svelte 5 UI utilities for toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,11 @@
       "types": "./dist/dropdown-search/state.d.ts",
       "default": "./dist/dropdown-search/state.js"
     },
+    "./modal": {
+      "types": "./dist/modal/index.d.ts",
+      "svelte": "./dist/modal/index.js",
+      "default": "./dist/modal/index.js"
+    },
     "./table": {
       "types": "./dist/data-table/index.d.ts",
       "svelte": "./dist/data-table/index.js",