@ibobbyts/svelte-ui-utils 0.2.2 → 0.2.4

package/dist/style.css

@@ -1194,22 +1194,31 @@
   opacity: 0.55;
 }
 
-.suu-modal-backdrop {
+.suu-dialog-backdrop {
   position: fixed;
   inset: 0;
   z-index: 1100;
   display: grid;
   place-items: center;
   padding: 24px;
-  background: rgb(15 23 42 / 0.46);
+  background: transparent;
   color: var(--suu-color-text);
   font-family: var(--suu-font);
 }
 
-.suu-modal {
+.suu-dialog-backdrop[data-dimmed='true'] {
+  background: rgb(15 23 42 / var(--suu-dialog-backdrop-opacity, 0.46));
+}
+
+.suu-dialog-backdrop[data-blurred='true'] {
+  backdrop-filter: blur(var(--suu-dialog-backdrop-blur, 6px));
+}
+
+.suu-dialog {
+  position: relative;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
-  width: min(100%, var(--suu-modal-width, 38rem));
+  width: min(100%, var(--suu-dialog-width, 38rem));
   max-height: min(720px, calc(100vh - 48px));
   overflow: hidden;
   border: 1px solid var(--suu-color-border);
@@ -1218,54 +1227,66 @@
   box-shadow: var(--suu-shadow);
 }
 
-.suu-modal--sm {
-  --suu-modal-width: 30rem;
+.suu-dialog--sm {
+  --suu-dialog-width: 30rem;
 }
 
-.suu-modal--md {
-  --suu-modal-width: 42rem;
+.suu-dialog--md {
+  --suu-dialog-width: 42rem;
 }
 
-.suu-modal--lg {
-  --suu-modal-width: 58rem;
+.suu-dialog--lg {
+  --suu-dialog-width: 58rem;
 }
 
-.suu-modal:focus {
+.suu-dialog:focus {
   outline: none;
 }
 
-.suu-modal__header,
-.suu-modal__footer {
+.suu-dialog__countdown {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 3px;
+  background: var(--suu-color-accent);
+  transform-origin: left center;
+  animation: suu-dialog-countdown var(--suu-dialog-countdown-duration) linear forwards;
+}
+
+.suu-dialog__header,
+.suu-dialog__footer {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 16px 18px;
 }
 
-.suu-modal__header {
+.suu-dialog__header {
   justify-content: space-between;
   border-bottom: 1px solid var(--suu-color-border);
 }
 
-.suu-modal__heading {
+.suu-dialog__heading {
   min-width: 0;
 }
 
-.suu-modal__title {
+.suu-dialog__title {
   margin: 0;
   color: var(--suu-color-text);
   font-size: 1.125rem;
   line-height: 1.3;
 }
 
-.suu-modal__description,
+.suu-dialog__description,
 .suu-confirm-dialog__message {
   margin: 6px 0 0;
   color: var(--suu-color-muted);
   line-height: 1.5;
 }
 
-.suu-modal__close {
+.suu-dialog__close {
   display: inline-grid;
   flex: 0 0 auto;
   place-items: center;
@@ -1279,14 +1300,14 @@
   cursor: pointer;
 }
 
-.suu-modal__close:hover,
-.suu-modal__close:focus-visible {
+.suu-dialog__close:hover,
+.suu-dialog__close:focus-visible {
   background: var(--suu-color-surface);
   color: var(--suu-color-text);
   outline: none;
 }
 
-.suu-modal__close svg {
+.suu-dialog__close svg {
   width: 1.1rem;
   height: 1.1rem;
   fill: none;
@@ -1295,19 +1316,19 @@
   stroke-linecap: round;
 }
 
-.suu-modal__body {
+.suu-dialog__body {
   min-height: 0;
   overflow: auto;
   padding: 18px;
 }
 
-.suu-modal__footer {
+.suu-dialog__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 {
+.suu-dialog__button {
   min-height: 38px;
   padding: 7px 14px;
   border: 1px solid var(--suu-color-border);
@@ -1319,49 +1340,208 @@
   font-weight: 650;
 }
 
-.suu-modal__button:hover:not(:disabled),
-.suu-modal__button:focus-visible {
+.suu-dialog__button:hover:not(:disabled),
+.suu-dialog__button:focus-visible {
   border-color: var(--suu-color-accent);
   outline: none;
 }
 
-.suu-modal__button:disabled {
+.suu-dialog__button:disabled {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
-.suu-modal__button--primary {
+.suu-dialog__button--primary {
   border-color: var(--suu-color-accent);
   background: var(--suu-color-accent);
   color: var(--suu-color-accent-text);
 }
 
-.suu-modal__button--danger {
+.suu-dialog__button--danger {
   border-color: var(--suu-color-error);
   background: var(--suu-color-error);
   color: #ffffff;
 }
 
+@keyframes suu-dialog-countdown {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
 .suu-confirm-dialog__message {
   margin-top: 0;
 }
 
+.suu-input-dialog,
+.suu-csv-upload-dialog,
+.suu-password-copy-dialog {
+  display: grid;
+  gap: 14px;
+}
+
+.suu-input-dialog__message,
+.suu-csv-upload-dialog__selected,
+.suu-password-copy-dialog__message {
+  margin: 0;
+  color: var(--suu-color-muted);
+  line-height: 1.5;
+}
+
+.suu-password-copy-dialog__value {
+  display: grid;
+  gap: 6px;
+}
+
+.suu-password-copy-dialog__label {
+  color: var(--suu-color-text);
+  font-weight: 650;
+}
+
+.suu-password-copy-dialog__code {
+  display: block;
+  overflow-x: auto;
+  padding: 12px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-surface);
+  color: var(--suu-color-text);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    monospace;
+  font-size: 1rem;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.suu-input-dialog__field,
+.suu-csv-upload-dialog__field {
+  display: grid;
+  gap: 6px;
+  color: var(--suu-color-text);
+  font-weight: 650;
+}
+
+.suu-input-dialog__field input,
+.suu-csv-upload-dialog__field input {
+  min-height: 40px;
+  width: 100%;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  font: inherit;
+}
+
+.suu-input-dialog__field input {
+  padding: 8px 10px;
+}
+
+.suu-input-dialog__field input:focus,
+.suu-csv-upload-dialog__field input:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
+.suu-csv-upload-dialog__center {
+  display: flex;
+  justify-content: center;
+}
+
+.suu-dialog__alert {
+  padding: 10px 12px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  line-height: 1.5;
+}
+
+.suu-dialog__alert--error {
+  border-color: color-mix(in srgb, var(--suu-color-error) 38%, var(--suu-color-border));
+  background: color-mix(in srgb, var(--suu-color-error) 10%, var(--suu-color-bg));
+  color: var(--suu-color-error);
+}
+
+.suu-dialog__alert--success {
+  border-color: color-mix(in srgb, var(--suu-color-success) 38%, var(--suu-color-border));
+  background: color-mix(in srgb, var(--suu-color-success) 10%, var(--suu-color-bg));
+  color: var(--suu-color-success);
+}
+
+.suu-dialog__status {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--suu-color-muted);
+}
+
+.suu-dialog__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
+  border-top-color: var(--suu-color-accent);
+  border-radius: 999px;
+  animation: suu-dropdown-spinner 700ms linear infinite;
+}
+
+.suu-csv-upload-dialog__instructions {
+  padding: 14px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-surface);
+}
+
+.suu-csv-upload-dialog__instructions h3 {
+  margin: 0 0 8px;
+  color: var(--suu-color-text);
+  font-size: 0.95rem;
+}
+
+.suu-csv-upload-dialog__instructions ul {
+  margin: 0;
+  padding-left: 1.2rem;
+  color: var(--suu-color-muted);
+  line-height: 1.5;
+}
+
+.suu-image-preview-dialog {
+  display: grid;
+  place-items: center;
+}
+
+.suu-image-preview-dialog img {
+  display: block;
+  max-width: 100%;
+  max-height: min(70vh, 640px);
+  border-radius: var(--suu-radius);
+  object-fit: contain;
+}
+
 @media (max-width: 640px) {
-  .suu-modal-backdrop {
+  .suu-dialog-backdrop {
     align-items: end;
     padding: 12px;
   }
 
-  .suu-modal {
+  .suu-dialog {
     max-height: calc(100vh - 24px);
   }
 
-  .suu-modal__footer {
+  .suu-dialog__footer {
     flex-direction: column-reverse;
     align-items: stretch;
   }
 
-  .suu-modal__button {
+  .suu-dialog__button {
     width: 100%;
   }
 }

package/package.json

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

package/dist/modal/ConfirmDialog.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/modal/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAwDjE,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;;aAfgf,mBAAmB;WAAS,SAAS;;;;gBAAkI,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;cAenrB,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/modal/Modal.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/modal/Modal.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAsH5C,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;WAf6X,SAAS;;;;iBAAiI,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAe1gB,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/modal/types.d.ts

@@ -1,3 +0,0 @@
-export type ModalSize = 'sm' | 'md' | 'lg';
-export type ConfirmDialogIntent = 'default' | 'danger';
-//# sourceMappingURL=types.d.ts.map

package/dist/modal/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/modal/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,CAAC"}