@db-vincent/components 0.0.0-stage → 0.1.0

package/src/styles/pagination.css

@@ -0,0 +1,77 @@
+@layer components {
+  .ds-pagination {
+    align-items: center;
+    display: flex;
+    gap: var(--pagination-gap);
+  }
+
+  .ds-pagination__list {
+    align-items: center;
+    display: flex;
+    gap: var(--pagination-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-pagination__link,
+  .ds-pagination__ellipsis {
+    align-items: center;
+    border: 0;
+    border-radius: var(--pagination-radius);
+    display: inline-flex;
+    font-family: inherit;
+    font-size: var(--pagination-font-size);
+    height: var(--pagination-item-size);
+    justify-content: center;
+    min-width: var(--pagination-item-size);
+    padding-inline: var(--space-2);
+  }
+
+  .ds-pagination__link {
+    background: var(--pagination-bg);
+    color: var(--pagination-fg);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .ds-pagination__link:hover {
+    background: var(--pagination-bg-hover);
+    color: var(--pagination-fg-hover);
+  }
+
+  .ds-pagination__link:focus-visible {
+    outline: var(--pagination-focus-width) solid var(--pagination-focus-color);
+    outline-offset: var(--pagination-focus-offset);
+  }
+
+  .ds-pagination__link[aria-disabled="true"],
+  .ds-pagination__link:disabled {
+    background: transparent;
+    color: var(--pagination-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .ds-pagination__link[aria-current="page"] {
+    background: var(--pagination-bg-current);
+    color: var(--pagination-fg-current);
+    cursor: default;
+    font-weight: var(--weight-semibold);
+  }
+
+  .ds-pagination__ellipsis {
+    color: var(--pagination-fg-disabled);
+  }
+
+  .ds-pagination__link--direction {
+    gap: var(--space-1-5);
+    padding-inline: var(--space-3);
+  }
+
+  @media (max-width: 700px) {
+    .ds-pagination__link--direction .ds-pagination__label {
+      display: none;
+    }
+  }
+}

package/src/styles/section.css

@@ -0,0 +1,36 @@
+@layer components {
+  .ds-section {
+    border-top: 1px solid var(--section-border);
+    margin-block-start: var(--section-margin-top);
+    padding-block-start: var(--section-padding-top);
+  }
+
+  .ds-section__head {
+    align-items: baseline;
+    display: flex;
+    gap: var(--section-head-gap);
+    justify-content: space-between;
+  }
+
+  .ds-section__title {
+    font-size: var(--section-title-size);
+    letter-spacing: var(--type-title-sm-tracking);
+    line-height: var(--section-title-leading);
+    margin-block-end: var(--section-title-margin);
+  }
+
+  .ds-section__index {
+    color: var(--section-index-fg);
+    font-family: var(--font-mono);
+    font-size: var(--section-index-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-section__intro {
+    color: var(--section-intro-fg);
+    font-size: var(--section-intro-size);
+    line-height: var(--leading-base);
+    margin-block-end: var(--section-intro-margin);
+    max-width: var(--section-intro-max);
+  }
+}

package/src/styles/select.css

@@ -0,0 +1,235 @@
+@layer components {
+  .ds-select {
+    position: relative;
+    width: 100%;
+  }
+
+  .ds-select__control {
+    appearance: none;
+    background: var(--select-bg);
+    border: 1px solid var(--select-border);
+    border-radius: var(--select-radius);
+    color: var(--select-fg);
+    font-family: var(--font-body);
+    font-size: var(--text-sm);
+    height: var(--select-height);
+    line-height: var(--leading-sm);
+    padding-inline: var(--select-padding-x) var(--space-10);
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+    width: 100%;
+  }
+
+  .ds-select--sm .ds-select__control {
+    height: var(--select-height-sm);
+  }
+
+  .ds-select--lg .ds-select__control {
+    font-size: var(--text-base);
+    height: var(--select-height-lg);
+  }
+
+  .ds-select__control:hover:not(:disabled) {
+    border-color: var(--select-border-hover);
+  }
+
+  .ds-select__control:focus {
+    border-color: var(--select-border-focus);
+    box-shadow:
+      0 0 0 var(--select-focus-width) var(--select-focus-offset-color),
+      0 0 0 calc(var(--select-focus-width) * 2) var(--select-border-focus);
+    outline: none;
+  }
+
+  .ds-select__control:disabled {
+    background: var(--select-bg-disabled);
+    color: var(--select-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  .ds-select__control.is-invalid {
+    border-color: var(--select-border-invalid);
+  }
+
+  .ds-select__anchor {
+    position: relative;
+  }
+
+  .ds-select__trigger {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: var(--space-2);
+    justify-content: space-between;
+    text-align: start;
+  }
+
+  .ds-select__trigger.is-placeholder .ds-select__value {
+    color: var(--select-placeholder);
+  }
+
+  .ds-select__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-select__chevron {
+    color: var(--select-chevron);
+    pointer-events: none;
+    position: absolute;
+    right: var(--select-padding-x);
+    top: 50%;
+    transform: translateY(-50%);
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-select.is-open .ds-select__chevron {
+    transform: translateY(-50%) rotate(180deg);
+  }
+
+  .ds-select [data-ds-values] {
+    display: none;
+  }
+
+  .ds-select__popup {
+    background: var(--select-popup-bg);
+    border: 1px solid var(--select-popup-border);
+    border-radius: var(--select-popup-radius);
+    box-shadow: var(--select-popup-shadow);
+    inset-inline: 0;
+    max-height: var(--select-popup-max-height);
+    overflow-y: auto;
+    padding: var(--select-popup-padding);
+    position: absolute;
+    top: calc(100% + var(--select-popup-gap));
+    z-index: var(--select-popup-z);
+  }
+
+  .ds-select__popup[hidden] {
+    display: none;
+  }
+
+  .ds-select__list {
+    display: grid;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-select__option {
+    align-items: center;
+    border-radius: var(--select-option-radius);
+    color: var(--select-option-fg);
+    cursor: pointer;
+    display: flex;
+    gap: var(--space-3);
+    justify-content: space-between;
+    padding: var(--select-option-padding-y) var(--select-option-padding-x);
+  }
+
+  .ds-select__option:hover,
+  .ds-select__option.is-active {
+    background: var(--select-option-bg-hover);
+  }
+
+  .ds-select__option[aria-selected="true"] {
+    background: var(--select-option-bg-selected);
+    color: var(--select-option-fg-selected);
+  }
+
+  .ds-select__option[aria-disabled="true"] {
+    color: var(--select-option-fg-muted);
+    cursor: not-allowed;
+  }
+
+  .ds-select__option[aria-disabled="true"]:hover {
+    background: transparent;
+  }
+
+  .ds-select__option:focus-visible {
+    outline: var(--select-focus-width) solid var(--select-border-focus);
+    outline-offset: calc(-1 * var(--select-focus-offset));
+  }
+
+  .ds-select__option-text {
+    display: grid;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+
+  .ds-select__option-label {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-select__option-description {
+    color: inherit;
+    color: var(--select-option-description);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-select__indicator {
+    align-items: center;
+    border: 1px solid var(--select-border);
+    border-radius: var(--radius-xs);
+    color: transparent;
+    display: inline-flex;
+    flex: none;
+    height: var(--select-indicator-size);
+    justify-content: center;
+    width: var(--select-indicator-size);
+  }
+
+  .ds-select__option[aria-selected="true"] .ds-select__indicator {
+    background: var(--select-indicator-bg);
+    border-color: var(--select-indicator-bg);
+    color: var(--select-indicator-fg);
+  }
+
+  .ds-select:not(.ds-select--multiple) .ds-select__indicator {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  .ds-select:not(.ds-select--multiple)
+    .ds-select__option[aria-selected="true"]
+    .ds-select__indicator {
+    background: transparent;
+    color: var(--select-option-fg-selected);
+  }
+
+  .ds-select__footer {
+    border-top: 1px solid var(--select-popup-footer-border);
+    margin-block-start: var(--select-popup-gap);
+    padding-block-start: var(--select-popup-gap);
+  }
+
+  .ds-select__done {
+    background: transparent;
+    border: 0;
+    border-radius: var(--select-option-radius);
+    color: var(--select-option-fg-selected);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    padding: var(--select-option-padding-y) var(--select-option-padding-x);
+    text-align: start;
+    width: 100%;
+  }
+
+  .ds-select__done:hover {
+    background: var(--select-option-bg-hover);
+  }
+
+  .ds-select__done:focus-visible {
+    outline: var(--select-focus-width) solid var(--select-border-focus);
+    outline-offset: calc(-1 * var(--select-focus-offset));
+  }
+}

package/src/styles/skeleton.css

@@ -0,0 +1,64 @@
+@layer components {
+  .ds-skeleton {
+    background: var(--skeleton-bg);
+    border-radius: var(--skeleton-radius);
+    display: block;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .ds-skeleton::after {
+    animation: ds-skeleton-shimmer var(--skeleton-duration) var(--ease-standard)
+      infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--skeleton-highlight),
+      transparent
+    );
+    content: "";
+    inset: 0;
+    position: absolute;
+    transform: translateX(-100%);
+  }
+
+  .ds-skeleton--heading {
+    border-radius: var(--radius-sm);
+    height: var(--skeleton-heading-height);
+    width: 42%;
+  }
+
+  .ds-skeleton--text {
+    height: var(--skeleton-text-height);
+    width: 100%;
+  }
+
+  .ds-skeleton--text:last-child {
+    width: 72%;
+  }
+
+  .ds-skeleton--image {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--skeleton-image-radius);
+    width: 100%;
+  }
+
+  .ds-skeleton-stack {
+    display: grid;
+    gap: var(--skeleton-text-gap);
+  }
+
+  @keyframes ds-skeleton-shimmer {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-skeleton::after {
+      animation: none;
+      background: var(--skeleton-bg);
+      opacity: 0;
+    }
+  }
+}

package/src/styles/spinner.css

@@ -0,0 +1,42 @@
+@layer components {
+  .ds-spinner {
+    border: var(--spinner-stroke) solid var(--spinner-track);
+    border-radius: var(--radius-full);
+    border-top-color: var(--spinner-indicator);
+    display: inline-block;
+    height: var(--spinner-size-md);
+    width: var(--spinner-size-md);
+  }
+
+  .ds-spinner--sm {
+    height: var(--spinner-size-sm);
+    width: var(--spinner-size-sm);
+  }
+
+  .ds-spinner--lg {
+    height: var(--spinner-size-lg);
+    width: var(--spinner-size-lg);
+  }
+
+  .ds-spinner--slow {
+    animation: ds-spinner-rotate calc(var(--spinner-duration) * 2) linear
+      infinite;
+  }
+
+  .ds-spinner {
+    animation: ds-spinner-rotate var(--spinner-duration) linear infinite;
+  }
+
+  @keyframes ds-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-spinner,
+    .ds-spinner--slow {
+      animation-duration: 2.4s;
+    }
+  }
+}

package/src/styles/table.css

@@ -0,0 +1,175 @@
+@layer components {
+  .ds-table-wrap {
+    border: 1px solid var(--table-border);
+    border-radius: var(--table-radius);
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  .ds-table__toolbar {
+    align-items: center;
+    background: var(--table-toolbar-bg);
+    border-bottom: 1px solid var(--table-border);
+    display: flex;
+    gap: var(--table-toolbar-gap);
+    padding: var(--table-toolbar-padding);
+  }
+
+  .ds-table__filter {
+    max-width: var(--table-filter-width);
+  }
+
+  .ds-table__count {
+    color: var(--table-caption-fg);
+    font-family: var(--table-numeric-font);
+    font-size: var(--text-sm);
+    margin-inline-start: auto;
+    white-space: nowrap;
+  }
+
+  .ds-table {
+    background: var(--table-bg);
+    border-collapse: collapse;
+    font-size: var(--table-cell-size);
+    width: 100%;
+  }
+
+  .ds-table--wide {
+    min-width: var(--table-min-width);
+  }
+
+  .ds-table__caption {
+    color: var(--table-caption-fg);
+    font-size: var(--table-caption-size);
+    padding: var(--space-3) var(--table-cell-padding-x);
+    text-align: start;
+  }
+
+  .ds-table thead {
+    background: var(--table-header-bg);
+  }
+
+  .ds-table th {
+    color: var(--table-header-fg);
+    font-family: var(--font-body);
+    font-size: var(--table-header-size);
+    font-weight: var(--type-overline-weight);
+    letter-spacing: var(--type-overline-tracking);
+    padding: var(--space-2-5) var(--table-cell-padding-x);
+    text-align: start;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .ds-table td {
+    border-top: 1px solid var(--table-row-border);
+    color: var(--table-cell-fg);
+    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+    vertical-align: middle;
+  }
+
+  .ds-table tbody tr {
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-table tbody tr:hover {
+    background: var(--table-row-hover);
+  }
+
+  .ds-table tbody tr[aria-selected="true"] {
+    background: var(--table-row-selected);
+  }
+
+  .ds-table__sort-button {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-xs);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: var(--space-1);
+    letter-spacing: inherit;
+    padding: 0;
+    text-transform: inherit;
+  }
+
+  .ds-table__sort-button:hover {
+    color: var(--table-sort-hover);
+  }
+
+  .ds-table__sort-button:focus-visible {
+    outline: var(--table-focus-width) solid var(--table-focus-color);
+    outline-offset: var(--table-focus-offset);
+  }
+
+  .ds-table__sort {
+    color: var(--table-cell-fg-muted);
+    display: inline-flex;
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-table__sort-dir,
+  th[aria-sort="ascending"] .ds-table__sort-idle,
+  th[aria-sort="descending"] .ds-table__sort-idle {
+    display: none;
+  }
+
+  th[aria-sort="ascending"] .ds-table__sort-dir,
+  th[aria-sort="descending"] .ds-table__sort-dir {
+    display: block;
+  }
+
+  th[aria-sort="ascending"] .ds-table__sort,
+  th[aria-sort="descending"] .ds-table__sort {
+    color: var(--table-sort-hover);
+  }
+
+  th[aria-sort="ascending"] .ds-table__sort-dir {
+    transform: rotate(180deg);
+  }
+
+  .ds-table .is-numeric {
+    font-family: var(--table-numeric-font);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  .ds-table .is-end {
+    text-align: end;
+  }
+
+  .ds-table th.is-numeric .ds-table__sort-button,
+  .ds-table th.is-end .ds-table__sort-button {
+    flex-direction: row-reverse;
+  }
+
+  .ds-table__muted {
+    color: var(--table-cell-fg-muted);
+  }
+
+  .ds-table__mono {
+    font-family: var(--table-numeric-font);
+    font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .ds-table__swatch {
+    border: 1px solid var(--table-border);
+    border-radius: var(--radius-xs);
+    display: inline-block;
+    height: var(--space-3);
+    margin-inline-end: var(--space-2);
+    vertical-align: -0.1em;
+    width: var(--space-3);
+  }
+
+  .ds-table__empty {
+    color: var(--table-cell-fg-muted);
+    padding: var(--space-10) var(--table-cell-padding-x);
+    text-align: center;
+  }
+}

package/src/styles/theme-toggle.css

@@ -0,0 +1,29 @@
+@layer components {
+  .ds-theme-toggle__sun,
+  .ds-theme-toggle__moon {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .ds-theme-toggle__sun {
+    display: none;
+  }
+
+  [data-theme="dark"] .ds-theme-toggle__sun {
+    display: inline-flex;
+  }
+
+  [data-theme="dark"] .ds-theme-toggle__moon {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .ds-theme-toggle__sun {
+      display: inline-flex;
+    }
+
+    :root:not([data-theme="light"]) .ds-theme-toggle__moon {
+      display: none;
+    }
+  }
+}