@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/attachment/attachment.css

@@ -0,0 +1,265 @@
+/* attachment — a soft dashed drop zone and file cards with progress (Melon Mind surfaces: 16–24 px radius). */
+.mk-attachment,
+mk-attachment {
+  --mk-attachment-radius: var(--mk-radius-lg, 24px);
+  --mk-attachment-accent: var(--mk-accent);
+  display: grid;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.35rem;
+  padding: 1.75rem 1.25rem;
+  border: 1.5px dashed var(--mk-outline-soft);
+  border-radius: var(--mk-attachment-radius);
+  background: var(--mk-surface-2);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.25s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:hover,
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  border-color: var(--mk-outline);
+  background: var(--mk-surface-3);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  transform: scale(1.015);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:active {
+  transform: scale(0.99);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is(.mk-attachment, mk-attachment)[data-mk-disabled] [data-mk-attachment-drop] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] input[type='file'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon'] {
+  display: grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-bottom: 0.25rem;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-bg);
+  transition: translate 0.4s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:is(:hover, [data-mk-dragging]) [data-mk-part='icon'] {
+  translate: 0 -4px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon']::before {
+  content: '';
+  width: 1.25rem;
+  height: 1.25rem;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6.5 9.5 12 4l5.5 5.5M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] strong {
+  color: var(--mk-text);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] small {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list] {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list]:empty {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
+  border-radius: calc(var(--mk-attachment-radius) - 8px);
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item][data-mk-status='error'] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-error) 45%, transparent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] [data-mk-part='thumb'] {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.875rem;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='thumb'] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='meta'] {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='name'] {
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='detail'] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='complete'] [data-mk-part='detail'] {
+  color: var(--mk-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='error'] [data-mk-part='detail'] {
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) progress {
+  width: 100%;
+  height: 4px;
+  margin-top: 0.3rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-4);
+  appearance: none;
+  accent-color: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) progress[hidden] {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-bar {
+  background: transparent;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-value {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+  transition: width 0.3s ease;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-moz-progress-bar {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove] {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mk-error) 12%, transparent);
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:active:not(:disabled) {
+  transform: scale(0.9);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error] {
+  margin: 0;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--mk-radius-lg);
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+  font-size: 0.875rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error][hidden] {
+  display: none;
+}
+
+@keyframes mk-attachment-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-attachment, mk-attachment) :is([data-mk-attachment-drop], [data-mk-attachment-item], [data-mk-attachment-remove]) {
+    transition: none;
+    animation: none;
+    transform: none !important;
+  }
+}

package/src/components/attachment/element.ts

@@ -0,0 +1,50 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createAttachment, type AttachmentInstance, type AttachmentStatus } from './engine';
+
+/**
+ * <mk-attachment class="mk-attachment" accept="image/*,.pdf" multiple max-files="4" max-size="5000000"></mk-attachment>
+ * Emits mk:files ({added, files}), mk:remove ({file, files}) and mk:reject ({file, code, message}).
+ * Changing an attribute keeps the files already chosen.
+ */
+export class MkAttachmentElement extends MkElement<AttachmentInstance> {
+  static options: Record<string, OptionType> = {
+    accept: 'string',
+    multiple: 'boolean',
+    maxFiles: 'number',
+    maxSize: 'number',
+    disabled: 'boolean',
+    name: 'string',
+    hint: 'string',
+    initialFiles: 'json',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    return createAttachment(this, options);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.isConnected || !this.instance) return;
+    const files = this.instance.files;
+    this.instance.destroy();
+    this.instance = this.create({ ...this.options, initialFiles: files });
+  }
+
+  addFiles(files: Iterable<File> | ArrayLike<File>) {
+    return this.instance?.addFiles(files) ?? [];
+  }
+
+  /** Remove one file (HTMLElement.remove() still removes the element). */
+  removeFile(id: string) {
+    this.instance?.remove(id);
+  }
+
+  setProgress(id: string, value: number, status?: AttachmentStatus) {
+    this.instance?.setProgress(id, value, status);
+  }
+
+  get files() {
+    return this.instance?.files ?? [];
+  }
+}
+
+export const defineAttachment = () => defineElement('mk-attachment', MkAttachmentElement);