@360crewing/ui 0.1.3

package/dist/styles/Checkbox.css

@@ -0,0 +1,102 @@
+/* =====================================================================
+ * DS Checkbox
+ * Mirrors Figma `Checkbox` set (sm 16 / md 20 × Default / Checked /
+ * Disabled / Error). Tokens consumed: surface-primary, surface-brand,
+ * surface-disabled, border-primary, border-brand, border-disabled,
+ * border-error, icon-secondary.
+ * ===================================================================== */
+
+.ds-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-6);
+    cursor: pointer;
+    user-select: none;
+    line-height: 1;
+}
+
+.ds-checkbox--disabled {
+    cursor: not-allowed;
+}
+
+.ds-checkbox__input {
+    appearance: none;
+    flex-shrink: 0;
+    margin: 0;
+    background-color: var(--surface-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-sm);
+    cursor: inherit;
+    position: relative;
+    transition:
+        background-color var(--duration-fast) var(--easing-standard),
+        border-color var(--duration-fast) var(--easing-standard);
+}
+
+.ds-checkbox--sm .ds-checkbox__input {
+    width: 16px;
+    height: 16px;
+}
+
+.ds-checkbox--md .ds-checkbox__input {
+    width: 20px;
+    height: 20px;
+}
+
+.ds-checkbox__input:hover:not(:disabled):not(:checked) {
+    border-color: var(--border-strong);
+}
+
+.ds-checkbox__input:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus-brand);
+}
+
+/* Checked — brand fill + white check */
+.ds-checkbox__input:checked {
+    background-color: var(--surface-brand);
+    border-color: var(--surface-brand);
+}
+
+.ds-checkbox__input:checked::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60% auto;
+}
+
+/* Disabled */
+.ds-checkbox__input:disabled {
+    background-color: var(--surface-disabled);
+    border-color: var(--border-disabled);
+    cursor: not-allowed;
+}
+
+.ds-checkbox__input:disabled:checked {
+    background-color: var(--border-disabled);
+    border-color: var(--border-disabled);
+}
+
+/* Error */
+.ds-checkbox--error .ds-checkbox__input {
+    border-color: var(--border-error);
+}
+
+.ds-checkbox--error .ds-checkbox__input:focus-visible {
+    box-shadow: var(--shadow-focus-error);
+}
+
+.ds-checkbox__label {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    color: var(--text-primary);
+    line-height: 1.3;
+}
+
+.ds-checkbox--disabled .ds-checkbox__label {
+    color: var(--text-disabled);
+}

package/dist/styles/CheckboxField.css

@@ -0,0 +1,75 @@
+.checkbox-field {
+    display: flex;
+    gap: 12px;
+    height: 24px;
+    line-height: 24px;
+    align-items: center;
+    outline: none;
+
+    input {
+        appearance: none;
+        position: relative;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        border: 1px solid var(--stroke-color);
+        background-color: white;
+        cursor: pointer;
+        margin: 0;
+        flex-shrink: 0;
+        outline: none;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0px;
+            height: 0px;
+            font-size: 24px;
+            overflow: hidden;
+            border-radius: 4px;
+            line-height: 24px;
+            text-align: center;
+            /* Inlined (was url("/check.svg")) — root-absolute asset URLs break
+               Rspack's build-time CSS resolution; data URI is bundler-agnostic. */
+            background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 0.794988C12.0976 1.18831 12.0976 1.82601 11.7071 2.21934L4.81653 9.15939C4.36561 9.61355 3.63455 9.61352 3.18366 9.15941L0.292904 6.24802C-0.0976264 5.8547 -0.0976357 5.217 0.292883 4.82367C0.683401 4.43034 1.31657 4.43033 1.7071 4.82365L4.00007 7.13299L10.2929 0.794997C10.6834 0.401671 11.3166 0.401667 11.7071 0.794988Z' fill='white'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        &:checked::after {
+            width: 24px;
+            height: 24px;
+            background-color: var(--text-brand);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            background-color: var(--deactivate-grey-color);
+        }
+    }
+
+    .label {
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--default-black-color);
+        white-space: nowrap;
+    }
+
+    &.table-checkbox {
+        margin-left: 0;
+        justify-content: center;
+        width: 100%;
+    }
+
+    @media (max-width: 768px) {
+        margin-left: 0 !important;
+    }
+}
+
+.checkbox-field.error {
+    input {
+        border-color: red;
+    }
+}

package/dist/styles/CollapsibleFields.css

@@ -0,0 +1,53 @@
+.collapsible-fields {
+    width: 100%;
+    margin: 12px 0;
+}
+
+.collapsible-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: transparent;
+    border: none;
+    color: var(--text-brand);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 8px 0;
+    width: 100%;
+    text-align: left;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.collapsible-toggle .arrow {
+    display: inline-block;
+    transition: transform 0.2s ease;
+    font-size: 10px;
+    color: var(--text-brand);
+}
+
+.collapsible-toggle .arrow.expanded {
+    transform: rotate(90deg);
+}
+
+.collapsible-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    animation: slideDown 0.2s ease;
+    padding-top: 10px;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/dist/styles/Delimeter.css

@@ -0,0 +1,7 @@
+.hr {
+    width: 100%;
+    height: 1px;
+    background-color: var(--stroke-color);
+    flex-shrink: 0;
+    margin: 0 auto;
+}

package/dist/styles/DetailItem.css

@@ -0,0 +1,18 @@
+.detail-item {
+    width: 100%;
+    display: flex;
+    align-items: space-between;
+
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 400;
+    color: var(--default-black-color);
+
+    .dots {
+        flex: 1;
+        border-bottom: 1px dotted #000;
+        margin: 0 4px;
+        height: 10px;
+        opacity: 0.4;
+    }
+}

package/dist/styles/DropdownButton.css

@@ -0,0 +1,82 @@
+.dropdown-button-container {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+
+    .button-group {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .main-button-content {
+        flex: 1;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 12px;
+        white-space: nowrap;
+        color: var(--text-brand);
+    }
+
+    .dropdown-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-left: 4px;
+        color: inherit;
+        border-left: 1px solid rgba(24, 101, 177, 0.2);
+        margin-left: 8px;
+        
+        svg {
+            display: block;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+    }
+
+    /* Specific styles for print-button used as container */
+    &.print-button {
+        padding: 6px 8px 6px 12px;
+        border: 1px solid transparent;
+        cursor: pointer;
+
+        &:hover:not(.disabled) {
+            border: 1px solid var(--text-brand);
+        }
+
+        .dropdown-toggle {
+            margin-left: 8px;
+            padding-left: 8px;
+        }
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        z-index: 9999;
+        min-width: 160px;
+        margin-top: 4px;
+        background-color: #fff;
+        border: 1px solid var(--border-color, #dee2e6);
+        border-radius: 4px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 4px 0;
+    }
+
+    .dropdown-item {
+        padding: 8px 16px;
+        font-size: 14px;
+        color: var(--default-black-color, #212529);
+        cursor: pointer;
+        transition: background-color 0.2s;
+        white-space: nowrap;
+
+        &:hover {
+            background-color: var(--selection-color, #f8f9fa);
+        }
+    }
+}

package/dist/styles/Error.css

@@ -0,0 +1,14 @@
+.error-border {
+    border: 1px solid red !important;
+    border-radius: 4px !important;
+
+    svg {
+        fill: red !important;
+    }
+}
+
+.error-text {
+    color: red;
+    font-size: 12px;
+    font-weight: 500;
+}

package/dist/styles/FileUpload.css

@@ -0,0 +1,113 @@
+/* =====================================================================
+ * DS FileUpload — drag-and-drop / click upload zone.
+ * Sizes mirror Figma "Image upload" frame:
+ *   lg = Big (~420×340)
+ *   md = Medium (~320×120)
+ * ===================================================================== */
+
+.ds-file-upload {
+    --ds-file-upload-padding-y: var(--space-24);
+    --ds-file-upload-padding-x: var(--space-24);
+    --ds-file-upload-min-h: 180px;
+    --ds-file-upload-radius: var(--radius-lg);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-8);
+    padding: var(--ds-file-upload-padding-y) var(--ds-file-upload-padding-x);
+    min-height: var(--ds-file-upload-min-h);
+    background: var(--surface-secondary-light);
+    border: 1px dashed var(--border-secondary);
+    border-radius: var(--ds-file-upload-radius);
+    color: var(--text-secondary);
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    text-align: center;
+    cursor: pointer;
+    transition:
+        background-color var(--duration-fast) var(--easing-standard),
+        border-color     var(--duration-fast) var(--easing-standard),
+        color            var(--duration-fast) var(--easing-standard);
+}
+
+.ds-file-upload--md {
+    --ds-file-upload-padding-y: var(--space-16);
+    --ds-file-upload-padding-x: var(--space-16);
+    --ds-file-upload-min-h: 96px;
+    flex-direction: row;
+    text-align: left;
+    gap: var(--space-12);
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.ds-file-upload:hover:not(.is-disabled) {
+    background: var(--surface-brand-minimal);
+    border-color: var(--border-brand);
+    color: var(--text-primary);
+}
+
+.ds-file-upload.is-dragging:not(.is-disabled) {
+    background: var(--surface-brand-minimal);
+    border-color: var(--border-brand);
+    border-style: solid;
+    color: var(--text-brand);
+}
+
+.ds-file-upload.is-disabled {
+    background: var(--surface-disabled);
+    color: var(--text-disabled);
+    cursor: not-allowed;
+    border-color: var(--border-secondary);
+}
+
+.ds-file-upload--error {
+    border-color: var(--border-error);
+    color: var(--text-error);
+}
+.ds-file-upload--success {
+    border-color: var(--border-success);
+    color: var(--text-success);
+}
+
+.ds-file-upload__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.ds-file-upload:focus-within {
+    outline: none;
+    box-shadow: var(--shadow-focus-brand);
+}
+
+.ds-file-upload__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+}
+.ds-file-upload--md .ds-file-upload__icon { flex: 0 0 auto; }
+
+.ds-file-upload__label {
+    font-weight: var(--font-weight-medium);
+    color: var(--text-primary);
+}
+
+.ds-file-upload__help {
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+}
+
+.ds-file-upload--md .ds-file-upload__label,
+.ds-file-upload--md .ds-file-upload__help {
+    text-align: left;
+}

package/dist/styles/Icon.css

@@ -0,0 +1,12 @@
+.crewing-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.crewing-icon svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}

package/dist/styles/IconButton.css

@@ -0,0 +1,68 @@
+/* =====================================================================
+ * DS IconButton
+ * Mirrors Figma `IconButton` set (sm 28 / md 36 / lg 44 × Ghost / Filled).
+ * ===================================================================== */
+
+.ds-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    padding: 0;
+    color: var(--icon-primary);
+    transition:
+        background-color var(--duration-fast) var(--easing-standard),
+        color var(--duration-fast) var(--easing-standard);
+}
+
+.ds-icon-button--sm { width: 28px; height: 28px; }
+.ds-icon-button--md { width: 36px; height: 36px; }
+.ds-icon-button--lg { width: 44px; height: 44px; }
+
+.ds-icon-button:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus-brand);
+}
+
+.ds-icon-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+/* Ghost — transparent default, secondary tint on hover. */
+.ds-icon-button--ghost {
+    background-color: transparent;
+}
+.ds-icon-button--ghost:hover:not(:disabled) {
+    background-color: var(--surface-secondary-light);
+}
+.ds-icon-button--ghost:active:not(:disabled) {
+    background-color: var(--surface-secondary);
+}
+
+/* Filled — brand background, white icon. */
+.ds-icon-button--filled {
+    background-color: var(--surface-brand);
+    color: var(--icon-secondary);
+    border-color: var(--surface-brand);
+}
+.ds-icon-button--filled:hover:not(:disabled) {
+    background-color: var(--surface-brand-light);
+    border-color: var(--surface-brand-light);
+}
+.ds-icon-button--filled:active:not(:disabled) {
+    background-color: var(--surface-brand-dark);
+    border-color: var(--surface-brand-dark);
+}
+
+.ds-icon-button > svg {
+    width: 1em;
+    height: 1em;
+    font-size: 18px;
+    fill: currentColor;
+}
+
+.ds-icon-button--sm > svg { font-size: 14px; }
+.ds-icon-button--lg > svg { font-size: 22px; }

package/dist/styles/InformationPanel.css

@@ -0,0 +1,84 @@
+.information-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    background-color: var(--technical-gray-color);
+    min-height: 56px;
+    border-radius: 8px;
+    padding: 10px;
+    width: 100%;
+
+    .information-items {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        height: 100%;
+        flex-wrap: wrap;
+    }
+
+    .information-item {
+        display: flex;
+        align-items: center;
+        background-color: #ffffff;
+        height: 100%;
+        border-radius: 8px;
+        font-size: 12px;
+        padding: 8px;
+        font-weight: 400;
+        white-space: nowrap;
+
+        .information-item-label {
+            color: #666;
+            margin-right: 6px;
+        }
+
+        .information-item-value {
+            color: #000;
+        }
+    }
+
+    .information-actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 10px;
+        height: 100%;
+        flex-grow: 1;
+
+        .button {
+            width: auto;
+            height: 32px !important;
+            border-radius: 20px;
+            padding: 8px 16px 8px 16px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            white-space: nowrap;
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+
+            &.delete {
+                background-color: #18B1AC;
+                color: #ffffff;
+
+                svg,
+                svg *,
+                path {
+                    fill: #ffffff !important;
+                    stroke: #ffffff !important;
+                    color: #ffffff !important;
+                }
+            }
+
+            &.save {
+                background-color: var(--text-brand);
+            }
+        }
+    }
+}

package/dist/styles/Page.css

@@ -0,0 +1,46 @@
+.crewing-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.crewing-page__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.crewing-page__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.crewing-page__title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-primary, var(--default-black-color));
+}
+
+.crewing-page__subtitle {
+    font-size: 12px;
+    color: var(--text-secondary, var(--deactivate-grey-color));
+}
+
+.crewing-page__actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.crewing-page__content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}