@360crewing/ui 0.1.3

package/dist/styles/Badge.css

@@ -0,0 +1,172 @@
+/* Pill badge (Untitled UI pill-color style, plain CSS). */
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    max-width: 100%;
+    white-space: nowrap;
+    border-radius: 9999px;
+    font-weight: 500;
+    box-sizing: border-box;
+    line-height: 1.25;
+
+    &.badge--sm {
+        padding: 0.125rem 0.5rem;
+        font-size: 0.75rem;
+    }
+
+    &.badge--md {
+        padding: 0.125rem 0.625rem;
+        font-size: 0.875rem;
+    }
+
+    &.badge--lg {
+        padding: 0.25rem 0.75rem;
+        font-size: 0.875rem;
+    }
+
+    &.badge--with-dot {
+        &.badge--sm {
+            gap: 0.25rem;
+            padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+        }
+
+        &.badge--md {
+            gap: 0.375rem;
+            padding: 0.125rem 0.625rem 0.125rem 0.5rem;
+        }
+
+        &.badge--lg {
+            gap: 0.375rem;
+            padding: 0.25rem 0.75rem 0.25rem 0.625rem;
+        }
+    }
+
+    .badge__dot {
+        flex-shrink: 0;
+        width: 0.375rem;
+        height: 0.375rem;
+        border-radius: 50%;
+    }
+
+    &.badge--gray {
+        background-color: #fafafa;
+        color: #414651;
+        box-shadow: inset 0 0 0 1px #e9eaeb;
+
+        .badge__dot {
+            background-color: #717680;
+        }
+    }
+
+    &.badge--brand {
+        background-color: #ecf3fe;
+        color: #293896;
+        box-shadow: inset 0 0 0 1px #c7d5f6;
+
+        .badge__dot {
+            background-color: #293896;
+        }
+    }
+
+    &.badge--error {
+        background-color: #fef2f2;
+        color: #b42318;
+        box-shadow: inset 0 0 0 1px #fecdca;
+
+        .badge__dot {
+            background-color: #f04438;
+        }
+    }
+
+    &.badge--warning {
+        background-color: #fffaeb;
+        color: #b54708;
+        box-shadow: inset 0 0 0 1px #fedf89;
+
+        .badge__dot {
+            background-color: #f79009;
+        }
+    }
+
+    &.badge--success {
+        background-color: #ecfdf3;
+        color: #067647;
+        box-shadow: inset 0 0 0 1px #abefc6;
+
+        .badge__dot {
+            background-color: #17b26a;
+        }
+    }
+
+    &.badge--slate {
+        background-color: #f8fafc;
+        color: #1e293b;
+        box-shadow: inset 0 0 0 1px #e2e8f0;
+
+        .badge__dot {
+            background-color: #64748b;
+        }
+    }
+
+    &.badge--sky {
+        background-color: #f0f9ff;
+        color: #026aa2;
+        box-shadow: inset 0 0 0 1px #bae6fd;
+
+        .badge__dot {
+            background-color: #0ba5ec;
+        }
+    }
+
+    &.badge--blue {
+        background-color: #eff6ff;
+        color: #1849a9;
+        box-shadow: inset 0 0 0 1px #bddcff;
+
+        .badge__dot {
+            background-color: #3585f5;
+        }
+    }
+
+    &.badge--indigo {
+        background-color: #eef2ff;
+        color: #372aac;
+        box-shadow: inset 0 0 0 1px #c7d7fe;
+
+        .badge__dot {
+            background-color: #4942d8;
+        }
+    }
+
+    &.badge--purple {
+        background-color: #f4ebff;
+        color: #6b21a8;
+        box-shadow: inset 0 0 0 1px #dcd0fe;
+
+        .badge__dot {
+            background-color: #7f56d9;
+        }
+    }
+
+    &.badge--pink {
+        background-color: #fdf2fa;
+        color: #9e165f;
+        box-shadow: inset 0 0 0 1px #fccee8;
+
+        .badge__dot {
+            background-color: #ee46bc;
+        }
+    }
+
+    &.badge--orange {
+        background-color: #fff7ed;
+        color: #bf3503;
+        box-shadow: inset 0 0 0 1px #fcd9bd;
+
+        .badge__dot {
+            background-color: #ef6820;
+        }
+    }
+}

package/dist/styles/Breadcrumbs.css

@@ -0,0 +1,54 @@
+/* =====================================================================
+ * DS Breadcrumbs
+ * Mirrors Figma `Breadcrumbs`. Last item = text-primary semibold,
+ * others = text-secondary regular links, separator = text-secondary.
+ * ===================================================================== */
+
+.ds-breadcrumbs {
+    font-family: var(--font-family-base);
+    /* Breadcrumb-specific 12px (Figma); do NOT use shared --font-size-md (13px, used elsewhere) */
+    font-size: 12px;
+    line-height: 1.3;
+}
+
+.ds-breadcrumbs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ds-breadcrumbs__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.ds-breadcrumbs__link {
+    display: inline-flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+    /* Breadcrumb grey per Figma (#697984), distinct from --text-secondary #90A4AE */
+    color: #697984;
+    text-decoration: none;
+    cursor: pointer;
+    font: inherit;
+}
+
+.ds-breadcrumbs__link:hover {
+    color: var(--text-brand);
+}
+
+.ds-breadcrumbs__current {
+    color: var(--text-primary);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-breadcrumbs__separator {
+    color: #697984;
+    user-select: none;
+}

package/dist/styles/Button.css

@@ -0,0 +1,416 @@
+.button {
+    min-width: 100px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 5px;
+
+    &.red-button {
+        background-color: var(--red-color) !important;
+        color: white !important;
+    }
+}
+
+/* =====================================================================
+ * DS Button — canonical design-system Button class set.
+ * Activate via `variant`/`size` props on <Button />. The legacy
+ * `.default-button` / `.secondary-button` / `.inactive-button` classes
+ * stay below for callers still passing `className="..."` directly.
+ * Variants: primary | secondary | tertiary | edit | additional | danger | ghost
+ * Sizes:    sm (28) | md (36) | lg (44)
+ * ===================================================================== */
+
+.ds-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-4);
+    border: 1px solid transparent;
+    border-radius: var(--radius-3xl);
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    text-decoration: none;
+    transition:
+        background-color var(--duration-fast) var(--easing-standard),
+        border-color     var(--duration-fast) var(--easing-standard),
+        color            var(--duration-fast) var(--easing-standard),
+        box-shadow       var(--duration-fast) var(--easing-standard);
+}
+
+.ds-button:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-focus-brand);
+}
+
+.ds-button[disabled],
+.ds-button.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.ds-button.is-loading {
+    pointer-events: none;
+    position: relative;
+    color: transparent !important;
+}
+
+/* Sizes */
+.ds-button--sm {
+    height: var(--control-height-sm);
+    padding: 0 var(--space-8);
+    font-size: var(--font-size-sm);
+}
+.ds-button--md {
+    height: var(--control-height-md);
+    padding: 0 var(--space-12);
+    font-size: var(--font-size-sm);
+}
+.ds-button--lg {
+    height: var(--control-height-lg);
+    padding: 0 var(--space-16);
+    font-size: var(--font-size-base);
+}
+
+/* On touch primary input, bump small buttons to WCAG 44px minimum. */
+@media (pointer: coarse) {
+    .ds-button--sm,
+    .ds-button--md {
+        min-height: var(--touch-target-min);
+    }
+}
+
+.ds-button--full-width {
+    width: 100%;
+}
+
+/* Variant: primary (filled brand) */
+.ds-button--primary {
+    background-color: var(--surface-brand);
+    color: var(--text-tertiary);
+    border-color: var(--surface-brand);
+}
+.ds-button--primary:hover {
+    background-color: var(--surface-brand-light);
+    border-color: var(--surface-brand-light);
+}
+.ds-button--primary:active {
+    background-color: var(--surface-brand-dark);
+    border-color: var(--surface-brand-dark);
+}
+
+/* Variant: secondary (light brand tint) */
+.ds-button--secondary {
+    background-color: var(--surface-brand-minimal);
+    color: var(--text-brand);
+    border-color: transparent;
+}
+.ds-button--secondary:hover {
+    background-color: var(--color-indigo-200);
+}
+.ds-button--secondary:active {
+    background-color: var(--color-indigo-300);
+    color: var(--color-indigo-800);
+}
+
+/* Variant: tertiary (text-only link button) */
+.ds-button--tertiary {
+    background-color: transparent;
+    color: var(--text-brand);
+    border-color: transparent;
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+}
+.ds-button--tertiary:hover {
+    color: var(--color-indigo-500);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.ds-button--tertiary:active {
+    color: var(--color-indigo-800);
+}
+
+/* Variant: edit (white with brand border, inline in tables/rows) */
+.ds-button--edit {
+    background-color: var(--surface-primary);
+    color: var(--text-brand);
+    border-color: var(--border-brand);
+}
+.ds-button--edit:hover {
+    background-color: var(--surface-brand-minimal);
+}
+.ds-button--edit:active {
+    background-color: var(--color-indigo-200);
+}
+
+/* Variant: additional (light pill with leading + icon) */
+.ds-button--additional {
+    background-color: var(--surface-brand-minimal);
+    color: var(--text-brand);
+    border-color: transparent;
+    padding-left: var(--space-8);
+    padding-right: var(--space-12);
+}
+.ds-button--additional:hover {
+    border-color: var(--border-brand);
+}
+
+/* Variant: danger (destructive) */
+.ds-button--danger {
+    background-color: var(--surface-error);
+    color: var(--text-tertiary);
+    border-color: var(--surface-error);
+}
+.ds-button--danger:hover {
+    background-color: var(--color-red-700);
+    border-color: var(--color-red-700);
+}
+.ds-button--danger:focus-visible {
+    box-shadow: var(--shadow-focus-error);
+}
+
+/* Variant: ghost (transparent neutral, icon-button style) */
+.ds-button--ghost {
+    background-color: transparent;
+    color: var(--text-primary);
+    border-color: transparent;
+}
+.ds-button--ghost:hover {
+    background-color: var(--surface-secondary-light);
+}
+.ds-button--ghost:active {
+    background-color: var(--surface-secondary);
+}
+
+/* Icon slots — kept vertically centered, sized to current font size. */
+.ds-button__icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1em;
+    height: 1em;
+    align-items: center;
+    justify-content: center;
+}
+.ds-button__icon > svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+}
+
+.ds-button__spinner {
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    color: var(--text-tertiary);
+}
+.ds-button--secondary.is-loading .ds-button__spinner,
+.ds-button--tertiary.is-loading .ds-button__spinner,
+.ds-button--edit.is-loading      .ds-button__spinner,
+.ds-button--ghost.is-loading     .ds-button__spinner,
+.ds-button--additional.is-loading .ds-button__spinner {
+    color: var(--text-brand);
+}
+
+.no-min-width {
+    min-width: auto;
+}
+
+.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.default-button,
+.delete-button {
+    width: 100%;
+    height: 40px;
+    background-color: var(--text-brand);
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: white;
+    border: none;
+
+    &:hover {
+        opacity: 0.95;
+    }
+
+    @media (max-width: 768px) {
+        height: 44px;
+    }
+}
+
+.inactive-button {
+    width: 100%;
+    height: 40px;
+    background-color: white;
+    border-radius: 24px;
+    border: 1px solid var(--deactivate-grey-color);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--deactivate-grey-color);
+
+    &:hover {
+        opacity: 0.95;
+    }
+}
+
+.secondary-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 32px;
+    background-color: var(--surface-brand-minimal);
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-brand);
+    border: none;
+    gap: 6px;
+
+    &:hover {
+        opacity: 0.95;
+    }
+
+    svg {
+        fill: var(--text-brand);
+    }
+}
+
+.secondary-button-small {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    background-color: var(--text-brand-light);
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 600;
+    color: var(--text-brand);
+    border: none;
+    gap: 6px;
+    padding: 6px 12px;
+    width: fit-content;
+
+    &:hover {
+        opacity: 0.95;
+    }
+
+    svg {
+        fill: var(--text-brand);
+    }
+}
+
+.bordered-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    background-color: white;
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-brand);
+    border: 1px solid var(--text-brand);
+}
+
+.add-new {
+    display: flex;
+    gap: 6px;
+    background-color: var(--surface-brand-minimal);
+    border-radius: 20px;
+    height: 30px;
+    padding: 6px 12px;
+    border: none;
+    color: var(--text-brand);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 12px;
+
+    &:hover {
+        border: 1px solid var(--text-brand);
+        cursor: pointer;
+    }
+
+    svg {
+        width: 12px;
+        height: 12px;
+        fill: var(--text-brand);
+    }
+}
+
+.download-button {
+    justify-content: space-between;
+    height: 28px;
+    line-height: 28px;
+    background-color: var(--technical-gray-color);
+    border-radius: 4px;
+    padding: 8px 10px;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+
+    svg {
+        * {
+            color: var(--text-brand);
+        }
+    }
+}
+
+.only-text {
+    background-color: transparent;
+    border: none;
+    color: var(--text-brand);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.delete-button {
+    background-color: var(--delete-btn-color);
+
+    svg {
+        fill: white;
+    }
+}
+
+.print-button {
+    display: flex;
+    gap: 0;
+    background-color: #1865B110;
+    border-radius: 20px;
+    height: 24px;
+    padding: 6px 12px;
+    color: var(--text-brand);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 12px;
+    border: 1px solid transparent;
+    cursor: pointer;
+
+    &:hover {
+        border: 1px solid var(--text-brand);
+    }
+}

package/dist/styles/Card.css

@@ -0,0 +1,34 @@
+.crewing-card {
+    background-color: white;
+    border: 1px solid var(--stroke-color);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.crewing-card--pad-none .crewing-card__body { padding: 0; }
+.crewing-card--pad-sm   .crewing-card__body { padding: 8px; }
+.crewing-card--pad-md   .crewing-card__body { padding: 16px; }
+.crewing-card--pad-lg   .crewing-card__body { padding: 24px; }
+
+.crewing-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--stroke-color);
+}
+
+.crewing-card__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary, var(--default-black-color));
+}
+
+.crewing-card__actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}