doom-design-system 0.5.0 → 0.6.0

package/dist/components/Table/Table.module.css

@@ -1,200 +1,222 @@
-.container {
-  width: 100%;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background: var(--surface-accent);
-  box-shadow: var(--shadow-hard);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.container.flat {
-  box-shadow: none;
-}
-
-.toolbar {
-  padding: var(--spacing-4);
-  border-bottom: var(--border-width) solid var(--card-border);
-  background: transparent;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-.headerGroup {
-  display: flex;
-  flex-direction: column;
-  border-bottom: var(--border-width) solid var(--card-border);
-  background: transparent;
-  width: 100%;
-}
-
-.searchBar {
-  padding: var(--spacing-4);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-4);
-  width: 100%;
-}
-@media (max-width: 768px) {
-  .searchBar {
+@layer doom.components {
+  .container {
+    width: 100%;
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    background: var(--surface-accent);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+    display: flex;
     flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-3);
   }
-}
-
-.searchWrapper {
-  width: var(--spacing-72);
-}
-@media (max-width: 768px) {
-  .searchWrapper {
-    width: 100%;
+  .container.flat {
+    box-shadow: none;
   }
-}
-
-.actionsWrapper {
-  display: flex;
-  gap: var(--spacing-2);
-  align-items: center;
-}
-@media (max-width: 768px) {
-  .actionsWrapper {
+  .toolbar {
+    padding: var(--space-4);
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+    background: transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+  }
+  .headerGroup {
+    display: flex;
+    flex-direction: column;
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+    background: transparent;
     width: 100%;
+  }
+  .searchBar {
+    padding: var(--space-4);
+    display: flex;
     justify-content: space-between;
+    align-items: center;
+    gap: var(--space-4);
+    width: 100%;
+  }
+  @media (max-width: 768px) {
+    .searchBar {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--space-3);
+    }
+  }
+  .searchWrapper {
+    width: 288px;
+  }
+  @media (max-width: 768px) {
+    .searchWrapper {
+      width: 100%;
+    }
+  }
+  .actionsWrapper {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+  }
+  @media (max-width: 768px) {
+    .actionsWrapper {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+  .controls {
+    display: flex;
+    gap: var(--space-2);
   }
-}
-
-.controls {
-  display: flex;
-  gap: var(--spacing-2);
-}
-
-.filterBar {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  background: var(--background);
-  border-top: var(--border-width) solid var(--card-border);
-  border-bottom: var(--border-width) solid var(--card-border);
-  box-shadow: inset 0 var(--border-width) var(--spacing-1) rgba(0, 0, 0, 0.06);
-  padding: var(--spacing-4);
-  gap: var(--spacing-2);
-}
-@media (max-width: 768px) {
   .filterBar {
-    flex-direction: column;
-    align-items: stretch;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    background: var(--background);
+    border-top: var(--surface-border-width) solid var(--card-border);
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+    box-shadow: inset 0 var(--surface-border-width) var(--space-1) rgba(0, 0, 0, 0.06);
+    padding: var(--space-4);
+    gap: var(--space-2);
+  }
+  @media (max-width: 768px) {
+    .filterBar {
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
-}
-
-.filterItem {
-  /* "Module" look */
-  min-width: var(--spacing-36);
-  width: var(--spacing-56);
-  position: relative;
-}
-@media (max-width: 768px) {
   .filterItem {
+    /* "Module" look */
+    min-width: 14ch;
+    width: 22ch;
+    position: relative;
+  }
+  @media (max-width: 768px) {
+    .filterItem {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+  .tableWrapper {
     width: 100%;
-    min-width: 0;
+    overflow: hidden;
+  }
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--control-font-size);
+    background: var(--card-bg);
+  }
+  .th {
+    text-align: left;
+    padding: var(--space-4);
+    background: var(--secondary);
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    user-select: none;
+    white-space: nowrap;
+    color: var(--secondary-foreground);
+    position: sticky;
+    top: 0;
+    z-index: var(--z-elevated);
+  }
+  .th.compact {
+    padding: var(--space-2) var(--space-4);
+  }
+  .th.relaxed {
+    padding: var(--space-6) var(--space-4);
+  }
+  .th.sortable {
+    cursor: pointer;
+  }
+  .th.sortable:hover {
+    filter: brightness(0.95);
+    color: var(--secondary-foreground);
+  }
+  .td {
+    padding: var(--space-4);
+    border-bottom: 1px solid var(--card-border);
+    color: var(--on-surface);
+  }
+  .td.compact {
+    padding: var(--space-2) var(--space-4);
+  }
+  .td.relaxed {
+    padding: var(--space-6) var(--space-4);
+  }
+  .tr:last-child td {
+    border-bottom: none;
+  }
+  .tr:hover {
+    background-color: color-mix(in srgb, var(--muted-foreground) 10%, transparent);
+  }
+  .tr.striped:nth-of-type(even) {
+    background-color: color-mix(in srgb, var(--muted-foreground) 5%, transparent);
+  }
+  .tr.striped:hover {
+    background-color: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
+  }
+  .tr .row-actions {
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-in-out);
+  }
+  .tr:hover .row-actions {
+    opacity: 1;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+  .paginationContainer {
+    padding: var(--space-4);
+    border-top: var(--surface-border-width) solid var(--card-border);
+    background: transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .noResults {
+    padding: var(--space-8);
+    text-align: center;
+    color: var(--on-surface-muted);
+  }
+  .headerContent {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .expandToggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-6);
+    height: var(--space-6);
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--on-surface-muted);
+    border-radius: var(--radius-md);
+    transition: all var(--duration-fast) var(--ease-in-out);
+  }
+  .expandToggle:hover {
+    color: var(--on-surface);
+    background: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
+  }
+  .expandToggleIcon {
+    transition: transform var(--duration-fast) var(--ease-in-out);
+  }
+  .expandToggleIcon.expanded {
+    transform: rotate(90deg);
+  }
+  .expandedRow td {
+    padding: var(--space-4);
+    background: color-mix(in srgb, var(--muted-foreground) 5%, transparent);
+    border-bottom: 1px solid var(--card-border);
+  }
+  .expandCol {
+    width: 40px;
+    padding: var(--space-2) !important;
   }
-}
-
-.tableWrapper {
-  width: 100%;
-  overflow: hidden;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--text-base);
-  background: var(--card-bg);
-}
-
-.th {
-  text-align: left;
-  padding: var(--spacing-4);
-  background: var(--secondary);
-  border-bottom: var(--border-width) solid var(--card-border);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  user-select: none;
-  white-space: nowrap;
-  color: var(--secondary-foreground);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-elevated);
-}
-.th.compact {
-  padding: var(--spacing-2) var(--spacing-4);
-}
-.th.relaxed {
-  padding: var(--spacing-6) var(--spacing-4);
-}
-.th.sortable {
-  cursor: pointer;
-}
-.th.sortable:hover {
-  filter: brightness(0.95);
-  color: var(--secondary-foreground);
-}
-
-.td {
-  padding: var(--spacing-4);
-  border-bottom: 1px solid var(--card-border);
-  color: var(--on-surface);
-}
-.td.compact {
-  padding: var(--spacing-2) var(--spacing-4);
-}
-.td.relaxed {
-  padding: var(--spacing-6) var(--spacing-4);
-}
-
-.tr:last-child td {
-  border-bottom: none;
-}
-.tr:hover {
-  background-color: color-mix(in srgb, var(--muted-foreground) 10%, transparent);
-}
-.tr.striped:nth-of-type(even) {
-  background-color: color-mix(in srgb, var(--muted-foreground) 5%, transparent);
-}
-.tr.striped:hover {
-  background-color: color-mix(in srgb, var(--muted-foreground) 15%, transparent);
-}
-.tr .row-actions {
-  opacity: 0;
-  transition: opacity var(--duration-fast) var(--ease-in-out);
-}
-.tr:hover .row-actions {
-  opacity: 1;
-}
-
-.paginationContainer {
-  padding: var(--spacing-4);
-  border-top: var(--border-width) solid var(--card-border);
-  background: transparent;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.noResults {
-  padding: var(--spacing-8);
-  text-align: center;
-  color: var(--on-surface-muted);
-}
-
-.headerContent {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
 }

package/dist/components/Table/TableHeaderFilter.js

@@ -87,5 +87,5 @@ export function TableHeaderFilter({ column, options, }) {
     return (_jsx(Popover, { content: _jsx(Combobox, { inline: true, multiple: true, options: sortedOptions, placeholder: "Filter...", searchable: sortedOptions.length > 5, size: "sm", value: selectedValues, onChange: handleChange }), isOpen: isOpen, placement: "bottom-start", trigger: _jsxs(Button, { "aria-label": `Filter by ${String(column.columnDef.header)}`, size: "sm", variant: hasActiveFilter ? "primary" : "ghost", onClick: (e) => {
                 e.stopPropagation();
                 setIsOpen(!isOpen);
-            }, children: [_jsx(Filter, { size: 16, strokeWidth: 2.5 }), selectedValues.length > 0 && (_jsxs("span", { className: styles.filterCount, children: ["(", selectedValues.length, ")"] }))] }), onClose: () => setIsOpen(false) }));
+            }, children: [_jsx(Filter, { size: 20, strokeWidth: 2.5 }), selectedValues.length > 0 && (_jsxs("span", { className: styles.filterCount, children: ["(", selectedValues.length, ")"] }))] }), onClose: () => setIsOpen(false) }));
 }

package/dist/components/Table/TableHeaderFilter.module.css

@@ -1,58 +1,52 @@
-.filterContent {
-  min-width: var(--spacing-50);
-  max-width: var(--spacing-70);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-}
-
-.filterCount {
-  color: currentColor;
-  font-size: var(--text-xs);
-  font-weight: 700;
-  line-height: 1;
-}
-
-.filterHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-2);
-  border-bottom: var(--border-width) solid var(--card-border);
-}
-
-.filterBody {
-  padding: var(--spacing-2);
-}
-
-.filterOptions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  max-height: var(--spacing-50);
-  overflow-y: auto;
-}
-
-.filterOption {
-  padding: var(--spacing-1);
-  border-radius: var(--radius);
-}
-.filterOption:hover {
-  background: var(--surface-accent);
-}
-
-.filterInput {
-  width: 100%;
-}
-
-.filterSelect {
-  width: 100%;
-}
-
-.filterActions {
-  display: flex;
-  gap: var(--spacing-1);
-  margin-top: var(--spacing-2);
-  padding-top: var(--spacing-2);
-  border-top: var(--border-width) solid var(--card-border);
+@layer doom.components {
+  .filterContent {
+    min-width: 20ch;
+    max-width: 30ch;
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+  }
+  .filterCount {
+    color: currentColor;
+    font-size: var(--text-xs);
+    font-weight: 700;
+    line-height: 1;
+  }
+  .filterHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-2);
+    border-bottom: var(--surface-border-width) solid var(--card-border);
+  }
+  .filterBody {
+    padding: var(--space-2);
+  }
+  .filterOptions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .filterOption {
+    padding: var(--space-1);
+    border-radius: var(--radius-md);
+  }
+  .filterOption:hover {
+    background: var(--surface-accent);
+  }
+  .filterInput {
+    width: 100%;
+  }
+  .filterSelect {
+    width: 100%;
+  }
+  .filterActions {
+    display: flex;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: var(--surface-border-width) solid var(--card-border);
+  }
 }

package/dist/components/Tabs/Tabs.module.css

@@ -1,89 +1,88 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
+@layer doom.components {
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-  to {
-    opacity: 1;
-  }
-}
-.tabsList {
-  display: flex;
-  margin-bottom: 0;
-  padding-left: var(--spacing-4);
-  position: relative;
-  gap: var(--spacing-2);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  max-width: 100%;
-  scrollbar-width: none;
-}
-.tabsList::-webkit-scrollbar {
-  display: none;
-}
-.tabsList.align-left {
-  justify-content: flex-start;
-}
-.tabsList.align-right {
-  justify-content: flex-end;
-  padding-right: var(--spacing-4);
-  padding-left: 0;
-}
-@media (max-width: 640px) {
   .tabsList {
+    display: flex;
+    margin-bottom: 0;
+    padding-left: var(--space-4);
+    position: relative;
+    gap: var(--space-2);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+    scrollbar-width: none;
+  }
+  .tabsList::-webkit-scrollbar {
+    display: none;
+  }
+  .tabsList.align-left {
+    justify-content: flex-start;
+  }
+  .tabsList.align-right {
+    justify-content: flex-end;
+    padding-right: var(--space-4);
     padding-left: 0;
-    padding-right: 0;
-    gap: var(--spacing-1);
   }
-}
-
-.tabsTrigger {
-  flex-shrink: 0;
-  padding: var(--spacing-3) var(--spacing-6);
-  font-size: var(--text-sm);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background-color: var(--card-bg);
-  color: var(--foreground);
-  border: var(--border-width) solid var(--card-border);
-  border-bottom: none;
-  border-radius: var(--radius) var(--radius) 0 0;
-  cursor: pointer;
-  position: relative;
-  transition: background-color 0.2s ease;
-  white-space: nowrap;
-}
-@media (max-width: 640px) {
+  @media (max-width: 640px) {
+    .tabsList {
+      padding-left: 0;
+      padding-right: 0;
+      gap: var(--space-1);
+    }
+  }
   .tabsTrigger {
-    padding: var(--spacing-3) var(--spacing-4);
+    flex-shrink: 0;
+    padding: var(--space-3) var(--space-6);
+    font-size: var(--text-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background-color: var(--card-bg);
+    color: var(--foreground);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-bottom: none;
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.2s ease;
+    white-space: nowrap;
+  }
+  @media (max-width: 640px) {
+    .tabsTrigger {
+      padding: var(--space-3) var(--space-4);
+    }
+  }
+  .tabsTrigger:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 90%);
+  }
+  .tabsTrigger.active {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .tabsTrigger.active:hover {
+    filter: brightness(1.05);
   }
-}
-.tabsTrigger:hover {
-  background-color: color-mix(in srgb, var(--primary), transparent 90%);
-}
-.tabsTrigger.active {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-.tabsTrigger.active:hover {
-  filter: brightness(1.05);
-}
-
-.tabsBody {
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  padding: 2.5rem;
-  box-shadow: var(--shadow-hard);
-  position: relative;
-  margin-top: -3px;
-}
-@media (max-width: 640px) {
   .tabsBody {
-    padding: var(--spacing-4);
+    background: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    padding: 2.5rem;
+    box-shadow: var(--shadow-md);
+    position: relative;
+    margin-top: -3px;
+  }
+  @media (max-width: 640px) {
+    .tabsBody {
+      padding: var(--space-4);
+    }
+  }
+  .tabsContent {
+    animation: fadeIn 0.3s ease-out forwards;
   }
-}
-
-.tabsContent {
-  animation: fadeIn 0.3s ease-out forwards;
 }