@360crewing/ui 0.1.3

package/dist/styles/Pagination.css

@@ -0,0 +1,150 @@
+.pagination-container {
+    padding: 0 20px;
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-direction: column;
+
+    .pages-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 16px;
+        margin: 0;
+
+        .pagination-page-size {
+            position: absolute;
+            left: 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-right: 10px;
+
+            label {
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 120%;
+                color: var(--default-black-color);
+            }
+
+            select {
+                appearance: none;
+                margin: 0;
+                padding: 4px 28px 4px 4px;
+                border: none;
+                outline: none;
+                background-color: transparent;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23293896' d='M2.5 4.25L6 7.75L9.5 4.25'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: right 4px center;
+                color: var(--text-brand);
+                font-family: inherit;
+                font-size: 12px;
+                font-weight: 600;
+                cursor: pointer;
+
+                &:disabled {
+                    cursor: not-allowed;
+                    opacity: 0.5;
+                }
+            }
+        }
+
+        .pagination-pages {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+
+            .pagination-button {
+                font-family: inherit;
+                font-size: 12px;
+                line-height: 120%;
+            }
+
+            .pagination-button--nav {
+                flex-shrink: 0;
+                width: 95px;
+                height: 32px;
+                border-radius: 20px;
+                font-weight: 600;
+                cursor: pointer;
+                box-sizing: border-box;
+
+                &:disabled {
+                    cursor: not-allowed;
+                    opacity: 0.45;
+                }
+            }
+
+            .pagination-button--prev {
+                border: 1px solid var(--border-brand);
+                background-color: var(--surface-primary);
+                color: var(--text-brand);
+
+                &:hover:not(:disabled) {
+                    background-color: color-mix(in srgb, var(--surface-brand-minimal) 35%, var(--surface-primary));
+                }
+            }
+
+            .pagination-button--next {
+                border: 1px solid var(--border-brand);
+                background-color: var(--surface-brand);
+                color: white;
+
+                &:hover:not(:disabled) {
+                    background-color: color-mix(in srgb, var(--text-brand) 88%, #000);
+                    border-color: color-mix(in srgb, var(--text-brand) 88%, #000);
+                }
+            }
+
+            .pagination-button--page {
+                min-width: 32px;
+                padding: 6px 8px;
+                border: none;
+                border-radius: 0;
+                background-color: transparent;
+                color: var(--default-black-color);
+                font-weight: 600;
+                line-height: 1.2;
+                cursor: pointer;
+                transition:
+                    background-color 0.15s ease,
+                    color 0.15s ease;
+
+                &:hover:not(:disabled):not(.active) {
+                    color: var(--text-brand);
+                }
+
+                &.active {
+                    width: 32px;
+                    height: 32px;
+                    padding: 0;
+                    border-radius: 50%;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: var(--surface-brand-minimal);
+                    color: var(--text-brand);
+                }
+
+                &:disabled {
+                    cursor: not-allowed;
+                    opacity: 0.45;
+                }
+            }
+
+            .pagination-ellipsis {
+                padding: 0 2px;
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--default-black-color);
+                user-select: none;
+            }
+        }
+    }
+}

package/dist/styles/Popover.css

@@ -0,0 +1,28 @@
+/* =====================================================================
+ * DS Popover — floating panel anchored to a trigger.
+ * ===================================================================== */
+
+.ds-popover {
+    position: absolute;
+    z-index: var(--z-popover);
+    min-width: 200px;
+    max-width: min(90vw, 480px);
+    padding: var(--space-12);
+    background: var(--surface-primary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-secondary);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    animation: ds-popover-in var(--duration-fast) var(--easing-standard);
+}
+
+@keyframes ds-popover-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ds-popover { animation: none; }
+}

package/dist/styles/ShadowedBlock.css

@@ -0,0 +1,13 @@
+.shadowed-block {
+    padding: 16px;
+    border-radius: 16px;
+    box-shadow: 0px 8px 16px 0px rgba(178, 203, 216, 0.25);
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    h3 {
+        margin-bottom: 16px;
+    }
+}

package/dist/styles/SidebarMenu.css

@@ -0,0 +1,151 @@
+/* =====================================================================
+ * DS SidebarMenu
+ * Mirrors Figma `SidebarMenu/Item` (5 states: default / selected / disabled /
+ * danger / locked). Container = white surface, items = pill rows.
+ * ===================================================================== */
+
+.ds-sidebar-menu {
+    width: 240px;
+    background-color: var(--surface-primary);
+    border-radius: var(--radius-2xl);
+    padding: var(--space-8);
+    box-shadow: var(--shadow-md);
+}
+
+.ds-sidebar-menu__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    padding: var(--space-6) var(--space-6) var(--space-8);
+}
+
+.ds-sidebar-menu__toggle {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 0;
+}
+
+.ds-sidebar-menu__toggle > span {
+    display: block;
+    width: 16px;
+    height: 2px;
+    background-color: var(--icon-primary);
+    border-radius: 1px;
+}
+
+.ds-sidebar-menu__title {
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+}
+
+.ds-sidebar-menu__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.ds-sidebar-menu__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    width: 100%;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-3) var(--space-6);
+    border-radius: var(--radius-lg);
+    text-align: left;
+    text-decoration: none;
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-primary);
+    line-height: 1.3;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+}
+
+.ds-sidebar-menu__lead {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.ds-sidebar-menu__dot {
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--icon-brand);
+}
+
+.ds-sidebar-menu__label {
+    flex: 1;
+}
+
+.ds-sidebar-menu__trailing,
+.ds-sidebar-menu__lock {
+    flex-shrink: 0;
+    color: var(--icon-disabled);
+}
+
+.ds-sidebar-menu__lock {
+    width: 14px;
+    height: 14px;
+    background-color: var(--icon-disabled);
+    border-radius: 2px;
+    display: inline-block;
+}
+
+/* ===== States ===== */
+
+.ds-sidebar-menu__item--default .ds-sidebar-menu__row:hover {
+    background-color: var(--surface-secondary-light);
+}
+
+.ds-sidebar-menu__item--selected .ds-sidebar-menu__row {
+    background-color: var(--surface-brand);
+    color: var(--text-tertiary);
+    font-weight: var(--font-weight-semibold);
+}
+.ds-sidebar-menu__item--selected .ds-sidebar-menu__dot {
+    background-color: var(--text-tertiary);
+}
+
+.ds-sidebar-menu__item--disabled .ds-sidebar-menu__row {
+    background-color: var(--surface-disabled);
+    color: var(--text-disabled);
+    cursor: not-allowed;
+}
+.ds-sidebar-menu__item--disabled .ds-sidebar-menu__dot {
+    background-color: var(--icon-disabled);
+}
+
+.ds-sidebar-menu__item--danger .ds-sidebar-menu__row {
+    background-color: var(--surface-error-minimal);
+    color: var(--text-error);
+}
+.ds-sidebar-menu__item--danger .ds-sidebar-menu__dot {
+    background-color: var(--icon-error);
+}
+
+.ds-sidebar-menu__item--locked .ds-sidebar-menu__row {
+    background-color: var(--surface-disabled);
+    color: var(--text-disabled);
+    cursor: not-allowed;
+}
+.ds-sidebar-menu__item--locked .ds-sidebar-menu__dot {
+    background-color: var(--icon-disabled);
+}

package/dist/styles/StatusBadge.css

@@ -0,0 +1,63 @@
+/* =====================================================================
+ * StatusBadge — domain-specific badge for certificate / document /
+ * assignment status. Variants map to the `--status-*` semantic tokens.
+ * ===================================================================== */
+
+.ds-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--control-height-xs);
+    padding: 0 var(--space-6);
+    border-radius: var(--radius-pill);
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
+    white-space: nowrap;
+    border: 1px solid transparent;
+}
+
+.ds-status-badge__dot {
+    display: inline-block;
+    width: var(--space-4);
+    height: var(--space-4);
+    border-radius: var(--radius-pill);
+    background-color: currentColor;
+    flex: 0 0 auto;
+}
+
+.ds-status-badge--valid {
+    background-color: var(--status-valid-bg);
+    color: var(--status-valid-fg);
+    border-color: var(--status-valid-border);
+}
+
+.ds-status-badge--expiring {
+    background-color: var(--status-expiring-bg);
+    color: var(--status-expiring-fg);
+    border-color: var(--status-expiring-border);
+}
+
+.ds-status-badge--expired {
+    background-color: var(--status-expired-bg);
+    color: var(--status-expired-fg);
+    border-color: var(--status-expired-border);
+}
+
+.ds-status-badge--unlimited {
+    background-color: var(--status-unlimited-bg);
+    color: var(--status-unlimited-fg);
+    border-color: var(--status-unlimited-border);
+}
+
+.ds-status-badge--neutral {
+    background-color: var(--surface-secondary-light);
+    color: var(--text-secondary);
+    border-color: var(--border-secondary);
+}
+
+/* Soft variant — drops the border for a flatter look (used inside dense rows). */
+.ds-status-badge--soft {
+    border-color: transparent;
+}

package/dist/styles/Table.css

@@ -0,0 +1,126 @@
+/* =====================================================================
+ * DS Table — styled wrappers around native <table>.
+ * ===================================================================== */
+
+.ds-table {
+    --ds-table-cell-padding-y: var(--space-12);
+    --ds-table-cell-padding-x: var(--space-16);
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+
+.ds-table--compact {
+    --ds-table-cell-padding-y: var(--space-8);
+    --ds-table-cell-padding-x: var(--space-12);
+    font-size: var(--font-size-xs);
+}
+
+.ds-table__header-cell,
+.ds-table__cell {
+    padding: var(--ds-table-cell-padding-y) var(--ds-table-cell-padding-x);
+    text-align: left;
+    vertical-align: middle;
+}
+
+.ds-table__header-cell {
+    background: var(--surface-secondary-light);
+    color: var(--text-secondary);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-bottom: 1px solid var(--border-secondary);
+    white-space: nowrap;
+}
+
+.ds-table__cell {
+    border-bottom: 1px solid var(--border-secondary);
+}
+.ds-table--no-row-borders .ds-table__cell {
+    border-bottom: 0;
+}
+
+.ds-table__cell--numeric,
+.ds-table__header-cell.ds-table__cell--numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.ds-table__cell--truncate {
+    max-width: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Striped */
+.ds-table--striped .ds-table__body .ds-table__row:nth-child(even) .ds-table__cell {
+    background: var(--surface-secondary-light);
+}
+
+/* Hover */
+.ds-table--hoverable .ds-table__row:hover:not(.is-selected) .ds-table__cell {
+    background: var(--surface-secondary-light);
+}
+
+/* Selected row */
+.ds-table__row.is-selected .ds-table__cell {
+    background: var(--surface-brand-minimal);
+}
+
+/* Clickable row */
+.ds-table__row.is-clickable { cursor: pointer; }
+.ds-table__row.is-clickable:focus-visible {
+    outline: none;
+}
+.ds-table__row.is-clickable:focus-visible .ds-table__cell:first-child {
+    box-shadow: inset 3px 0 0 var(--surface-brand);
+}
+
+/* Sticky header */
+.ds-table--sticky-header .ds-table__header .ds-table__header-cell {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+}
+
+/* Sortable */
+.ds-table__header-cell--sortable {
+    padding: 0;
+}
+.ds-table__sort-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-6);
+    width: 100%;
+    padding: var(--ds-table-cell-padding-y) var(--ds-table-cell-padding-x);
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    text-transform: inherit;
+    letter-spacing: inherit;
+    text-align: inherit;
+    cursor: pointer;
+}
+.ds-table__sort-trigger:hover {
+    color: var(--text-primary);
+}
+.ds-table__sort-trigger:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--surface-brand);
+}
+.ds-table__sort-icon {
+    font-size: 10px;
+    opacity: 0.5;
+    transition: opacity var(--duration-fast) var(--easing-standard);
+}
+.ds-table__sort-icon--asc,
+.ds-table__sort-icon--desc {
+    opacity: 1;
+    color: var(--text-brand);
+}