dalila 1.5.13 → 1.7.0

package/src/components/ui/collapsible/collapsible.css

@@ -0,0 +1,61 @@
+/* Dalila UI — Collapsible */
+
+.d-collapsible {
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  overflow: hidden;
+}
+
+.d-collapsible > summary,
+.d-collapsible-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--d-space-3) var(--d-space-4);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-medium);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: background var(--d-duration-fast) ease;
+}
+
+.d-collapsible > summary::-webkit-details-marker {
+  display: none;
+}
+
+.d-collapsible > summary:hover,
+.d-collapsible-trigger:hover {
+  background: var(--d-surface-raised);
+}
+
+.d-collapsible > summary::after,
+.d-collapsible-trigger::after {
+  content: "";
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid var(--d-text-muted);
+  border-bottom: 2px solid var(--d-text-muted);
+  transform: rotate(45deg);
+  transition: transform var(--d-duration) var(--d-ease);
+  flex-shrink: 0;
+}
+
+.d-collapsible[open] > summary::after {
+  transform: rotate(-135deg);
+}
+
+.d-collapsible-body {
+  padding: 0 var(--d-space-4) var(--d-space-4);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+}
+
+.d-collapsible[open] > .d-collapsible-body,
+.d-collapsible.open .d-collapsible-body {
+  padding-top: var(--d-space-2);
+}

package/src/components/ui/combobox/combobox.css

@@ -0,0 +1,85 @@
+/* Dalila UI — Combobox */
+
+.d-combobox {
+  position: relative;
+}
+
+.d-combobox-input {
+  width: 100%;
+  padding-right: var(--d-space-8);
+}
+
+.d-combobox-trigger {
+  position: absolute;
+  right: var(--d-space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: none;
+  border: none;
+  color: var(--d-text-muted);
+  cursor: pointer;
+  border-radius: var(--d-radius-sm);
+  transition: color var(--d-duration-fast) ease;
+}
+
+.d-combobox-trigger:hover {
+  color: var(--d-text-primary);
+}
+
+.d-combobox-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: var(--d-z-dropdown);
+  max-height: 12rem;
+  overflow-y: auto;
+  padding: var(--d-space-1) 0;
+  background: var(--d-surface-card);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  box-shadow: var(--d-shadow-md);
+  list-style: none;
+  margin: 0;
+
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--d-duration-fast) ease;
+}
+
+.d-combobox.open .d-combobox-list {
+  opacity: 1;
+  visibility: visible;
+}
+
+.d-combobox-option {
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  transition: background var(--d-duration-fast) ease;
+}
+
+.d-combobox-option:hover,
+.d-combobox-option.highlighted {
+  background: var(--d-surface-raised);
+}
+
+.d-combobox-option.selected {
+  color: var(--d-accent);
+  font-weight: var(--d-font-medium);
+}
+
+.d-combobox-empty {
+  padding: var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-muted);
+  text-align: center;
+}

package/src/components/ui/dalila/dalila.css

@@ -0,0 +1,42 @@
+/*
+ * Dalila UI — All components
+ * Import this single file to get everything.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="dalila.css" />
+ */
+
+@import "./tokens.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./button.css";
+@import "./input.css";
+@import "./checkbox.css";
+@import "./radio.css";
+@import "./slider.css";
+@import "./toggle.css";
+@import "./form.css";
+@import "./card.css";
+@import "./badge.css";
+@import "./chip.css";
+@import "./avatar.css";
+@import "./alert.css";
+@import "./toast.css";
+@import "./tooltip.css";
+@import "./popover.css";
+@import "./dropdown.css";
+@import "./combobox.css";
+@import "./tabs.css";
+@import "./accordion.css";
+@import "./collapsible.css";
+@import "./dialog.css";
+@import "./drawer.css";
+@import "./table.css";
+@import "./pagination.css";
+@import "./breadcrumb.css";
+@import "./separator.css";
+@import "./skeleton.css";
+@import "./spinner.css";
+@import "./empty-state.css";
+@import "./calendar.css";
+@import "./dropzone.css";

package/src/components/ui/dalila-core/dalila-core.css

@@ -0,0 +1,14 @@
+/*
+ * Dalila UI — Core (minimal)
+ * Tokens + typography + layout + button + input + form.
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="dalila-core.css" />
+ */
+
+@import "./tokens.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./button.css";
+@import "./input.css";
+@import "./form.css";

package/src/components/ui/dialog/dialog.css

@@ -0,0 +1,125 @@
+/* Dalila UI — Dialog */
+
+.d-dialog::backdrop {
+  background: var(--d-surface-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.d-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  max-width: min(28rem, calc(100vw - var(--d-space-8)));
+  max-height: calc(100vh - var(--d-space-8));
+  width: 100%;
+
+  padding: 0;
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  background: var(--d-surface-card);
+  color: var(--d-text-primary);
+
+  box-shadow: var(--d-shadow-lg);
+  overflow: hidden;
+
+  opacity: 0;
+  transform: scale(0.97) translateY(8px);
+  transition:
+    opacity var(--d-duration-slow) var(--d-ease),
+    transform var(--d-duration-slow) var(--d-ease),
+    overlay var(--d-duration-slow) var(--d-ease) allow-discrete,
+    display var(--d-duration-slow) var(--d-ease) allow-discrete;
+}
+
+.d-dialog[open] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+@starting-style {
+  .d-dialog[open] {
+    opacity: 0;
+    transform: scale(0.97) translateY(8px);
+  }
+}
+
+.d-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--d-space-4);
+  padding: var(--d-space-6) var(--d-space-6) var(--d-space-3);
+}
+
+.d-dialog-title {
+  margin: 0;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xl);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+}
+
+.d-dialog-body {
+  padding: var(--d-space-3) var(--d-space-6);
+  font-size: var(--d-text-base);
+  color: var(--d-text-secondary);
+  line-height: var(--d-leading);
+  overflow-y: auto;
+}
+
+.d-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--d-space-3);
+  padding: var(--d-space-4) var(--d-space-6) var(--d-space-6);
+}
+
+.d-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  width: 2rem;
+  height: 2rem;
+
+  font-size: var(--d-text-xl);
+  color: var(--d-text-muted);
+
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--d-radius-sm);
+  cursor: pointer;
+  transition: color var(--d-duration-fast) ease, border-color var(--d-duration-fast) ease;
+}
+
+.d-dialog-close:hover {
+  color: var(--d-text-primary);
+  border-color: var(--d-border-color);
+}
+
+.d-dialog-sm { max-width: min(22rem, calc(100vw - var(--d-space-8))); }
+.d-dialog-lg { max-width: min(36rem, calc(100vw - var(--d-space-8))); }
+.d-dialog-xl { max-width: min(48rem, calc(100vw - var(--d-space-8))); }
+
+@media (max-width: 640px) {
+  .d-dialog {
+    margin: auto 0 0;
+    max-width: 100%;
+    max-height: 85vh;
+    border-radius: var(--d-radius-lg) var(--d-radius-lg) 0 0;
+    transform: translateY(100%);
+  }
+
+  .d-dialog[open] {
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .d-dialog[open] {
+      transform: translateY(100%);
+    }
+  }
+}

package/src/components/ui/drawer/drawer.css

@@ -0,0 +1,122 @@
+/* Dalila UI — Drawer & Sheet */
+
+.d-drawer::backdrop {
+  background: var(--d-surface-overlay);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.d-drawer {
+  position: fixed;
+  margin: 0;
+  border: none;
+  padding: 0;
+  max-height: 100vh;
+  height: 100%;
+  background: var(--d-surface-card);
+  color: var(--d-text-primary);
+  box-shadow: var(--d-shadow-lg);
+  overflow: hidden;
+
+  inset: 0 0 0 auto;
+  width: min(24rem, 85vw);
+  border-left: 1px solid var(--d-border-color);
+
+  opacity: 0;
+  transform: translateX(1rem);
+  transition:
+    transform var(--d-duration-slow) var(--d-ease),
+    opacity var(--d-duration-slow) var(--d-ease),
+    overlay var(--d-duration-slow) var(--d-ease) allow-discrete,
+    display var(--d-duration-slow) var(--d-ease) allow-discrete;
+}
+
+.d-drawer[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@starting-style {
+  .d-drawer[open] {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+/* Left variant */
+.d-drawer-left {
+  inset: 0 auto 0 0;
+  border-left: none;
+  border-right: 1px solid var(--d-border-color);
+  transform: translateX(-1rem);
+}
+
+.d-drawer-left[open] {
+  transform: translateX(0);
+}
+
+@starting-style {
+  .d-drawer-left[open] {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+}
+
+.d-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--d-space-4);
+  padding: var(--d-space-6);
+  border-bottom: 1px solid var(--d-border-color);
+  flex-shrink: 0;
+}
+
+.d-drawer-title {
+  margin: 0;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xl);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+}
+
+.d-drawer-body {
+  padding: var(--d-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.d-drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--d-space-3);
+  padding: var(--d-space-4) var(--d-space-6);
+  border-top: 1px solid var(--d-border-color);
+  flex-shrink: 0;
+}
+
+/* Sheet variant (bottom) */
+.d-sheet {
+  inset: auto 0 0 0;
+  width: 100%;
+  height: auto;
+  max-height: 85vh;
+  border-left: none;
+  border-top: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg) var(--d-radius-lg) 0 0;
+  transform: translateY(100%);
+}
+
+.d-sheet[open] {
+  display: flex;
+  flex-direction: column;
+  transform: translateY(0);
+}
+
+@starting-style {
+  .d-sheet[open] {
+    transform: translateY(100%);
+  }
+}

package/src/components/ui/dropdown/dropdown.css

@@ -0,0 +1,87 @@
+/* Dalila UI — Dropdown & Menu */
+
+.d-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.d-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--d-z-dropdown);
+  min-width: 12rem;
+  padding: var(--d-space-1) 0;
+  background: var(--d-surface-card);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  box-shadow: var(--d-shadow-md);
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: all var(--d-duration-fast) ease;
+}
+
+.d-dropdown.open .d-menu,
+.d-menu.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.d-menu-right {
+  left: auto;
+  right: 0;
+}
+
+.d-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--d-space-2);
+  width: 100%;
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background var(--d-duration-fast) ease;
+  text-align: left;
+  text-decoration: none;
+}
+
+.d-menu-item:hover {
+  background: var(--d-surface-raised);
+}
+
+.d-menu-item-danger {
+  color: var(--d-error);
+}
+
+.d-menu-item-danger:hover {
+  background: var(--d-error-light);
+}
+
+.d-menu-item:disabled,
+.d-menu-item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.d-menu-separator {
+  height: 1px;
+  background: var(--d-border-color);
+  margin: var(--d-space-1) 0;
+}
+
+.d-menu-label {
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

package/src/components/ui/dropzone/dropzone.css

@@ -0,0 +1,47 @@
+/* Dalila UI — Dropzone / File Upload */
+
+.d-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--d-space-3);
+  padding: var(--d-space-8);
+  background: var(--d-surface-page);
+  border: 2px dashed var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  cursor: pointer;
+  transition: all var(--d-duration-fast) ease;
+  text-align: center;
+  font-family: var(--d-font-sans);
+}
+
+.d-dropzone:hover,
+.d-dropzone.dragover {
+  border-color: var(--d-accent);
+  background: rgba(37, 99, 235, 0.04);
+}
+
+.d-dropzone-icon {
+  font-size: 2rem;
+  color: var(--d-text-muted);
+}
+
+.d-dropzone-text {
+  font-size: var(--d-text-sm);
+  color: var(--d-text-muted);
+}
+
+.d-dropzone-text strong {
+  color: var(--d-accent);
+  font-weight: var(--d-font-medium);
+}
+
+.d-dropzone-hint {
+  font-size: var(--d-text-xs);
+  color: var(--d-text-muted);
+}
+
+.d-dropzone input[type="file"] {
+  display: none;
+}

package/src/components/ui/empty-state/empty-state.css

@@ -0,0 +1,33 @@
+/* Dalila UI — Empty State */
+
+.d-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--d-space-12) var(--d-space-6);
+  font-family: var(--d-font-sans);
+}
+
+.d-empty-icon {
+  font-size: 3rem;
+  color: var(--d-text-muted);
+  margin-bottom: var(--d-space-4);
+  opacity: 0.5;
+}
+
+.d-empty-title {
+  font-size: var(--d-text-lg);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  margin: 0 0 var(--d-space-2);
+}
+
+.d-empty-text {
+  font-size: var(--d-text-sm);
+  color: var(--d-text-muted);
+  max-width: 24rem;
+  margin: 0 0 var(--d-space-6);
+  line-height: var(--d-leading);
+}

package/src/components/ui/form/form.css

@@ -0,0 +1,44 @@
+/* Dalila UI — Form */
+
+.d-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--d-space-5);
+}
+
+.d-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--d-space-4);
+}
+
+.d-form-section-title {
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-lg);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  padding-bottom: var(--d-space-2);
+  border-bottom: 1px solid var(--d-border-color);
+  margin: 0;
+}
+
+.d-form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: var(--d-space-4);
+}
+
+.d-form-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--d-space-3);
+  padding-top: var(--d-space-4);
+}
+
+.d-form-actions-end {
+  justify-content: flex-end;
+}
+
+.d-form-actions-between {
+  justify-content: space-between;
+}