@360crewing/ui 0.1.3

package/dist/styles/ToggleField.css

@@ -0,0 +1,73 @@
+.toggle-field {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    height: 24px;
+    line-height: 24px;
+    align-items: center;
+    outline: none;
+    width: 100%;
+
+    input {
+        appearance: none;
+        position: relative;
+        width: 33px;
+        height: 19px;
+        border-radius: 100px;
+        border: none;
+        background-color: #ECEFF1;
+        cursor: pointer;
+        margin: 0;
+        flex-shrink: 0;
+        outline: none;
+        transition: all 0.2s;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translate(0%, -50%);
+            width: 21px;
+            height: 22px;
+            overflow: hidden;
+            border-radius: 50%;
+            background-color: #F2F5F8;
+            box-shadow: 0px 1px 2px 0px #94A1AC80;
+            transition: all 0.2s;
+        }
+
+        &:checked {
+            background-color: var(--text-brand);
+
+            &::after {
+                transform: translate(75%, -50%);
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            background-color: var(--deactivate-grey-color);
+        }
+    }
+
+    .label {
+        font-size: 12px;
+        font-weight: 400;
+        text-align: left;
+        color: var(--default-black-color);
+        white-space: wrap;
+        max-width: 202px;
+    }
+
+    &.table-checkbox {
+        margin-left: 0;
+        justify-content: center;
+    }
+}
+
+.checkbox-field.error {
+    input {
+        border-color: red;
+    }
+}

package/dist/styles/Tooltip.css

@@ -0,0 +1,30 @@
+/* =====================================================================
+ * DS Tooltip — short on-hover/focus hint.
+ * Positioned absolutely on document.body in scroll-window coordinates.
+ * ===================================================================== */
+
+.ds-tooltip {
+    position: absolute;
+    z-index: var(--z-tooltip);
+    max-width: 280px;
+    padding: var(--space-6) var(--space-10);
+    background: var(--color-neutral-900);
+    color: var(--color-neutral-0);
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    pointer-events: none;
+    animation: ds-tooltip-in var(--duration-fast) var(--easing-standard);
+}
+
+@keyframes ds-tooltip-in {
+    from { opacity: 0; transform: translateY(2px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ds-tooltip { animation: none; }
+}

package/dist/styles/tokens.css

@@ -0,0 +1,361 @@
+/* =====================================================================
+ * 360crewing Design Tokens
+ * ---------------------------------------------------------------------
+ * Single source of truth for color, type, spacing, radius, shadow,
+ * z-index, motion and breakpoints across host, marketplace SDK and
+ * mobile (Capacitor) builds.
+ *
+ * Architecture (3 tiers — same approach as Carbon, Polaris, Material 3):
+ *   1. PRIMITIVES — raw color scales and base units. Never used directly
+ *      in component CSS; only referenced from semantic aliases below.
+ *   2. SEMANTIC   — purpose-named aliases (`--surface-brand`,
+ *      `--text-primary`, …). Components MUST consume these.
+ *   3. COMPONENT  — per-component overrides exposed as `--ds-<part>`
+ *      vars so consumers can theme without forking CSS.
+ *
+ * Dark mode: structure ready, palette TBD. Toggle via `[data-theme="dark"]`.
+ * Density: scale exposed via `--ds-density` (1 = comfortable, 0.875 = compact).
+ * ===================================================================== */
+
+:root {
+    /* ============================================================
+     * 1. PRIMITIVE COLOR SCALES
+     * ============================================================ */
+
+    /* Indigo — brand */
+    --color-indigo-50:  #eef0ff;
+    --color-indigo-100: #d9deff;
+    --color-indigo-200: #b6bdf0;
+    --color-indigo-300: #8a96e8;
+    --color-indigo-400: #5d6cd6;
+    --color-indigo-500: #3949ab;
+    --color-indigo-600: #293896;
+    --color-indigo-700: #1f2c80;
+    --color-indigo-800: #1a237e;
+    --color-indigo-900: #131a5e;
+
+    /* Cyan — accent */
+    --color-cyan-50:  #e3feff;
+    --color-cyan-100: #b3f9fc;
+    --color-cyan-300: #4dd5dc;
+    --color-cyan-500: #20bec6;
+    --color-cyan-700: #178e94;
+
+    /* Neutral — gray scale */
+    --color-neutral-0:    #ffffff;
+    --color-neutral-25:   #f7f9fa;
+    --color-neutral-50:   #f2f5f8;
+    --color-neutral-75:   #eceff1;
+    --color-neutral-100:  #e4eaef;
+    --color-neutral-150:  #cfd8dc;
+    --color-neutral-300:  #b1bbc2;
+    --color-neutral-500:  #90a4ae;
+    --color-neutral-700:  #607d8b;
+    --color-neutral-900:  #26292b;
+    --color-neutral-1000: #000000;
+
+    /* Success — green */
+    --color-green-50:  #e8f5e9;
+    --color-green-500: #2e7d32;
+    --color-green-700: #1b5e20;
+
+    /* Warning — amber */
+    --color-amber-50:  #fffde7;
+    --color-amber-500: #f9a825;
+    --color-amber-700: #c17900;
+
+    /* Danger — red */
+    --color-red-50:  #feebee;
+    --color-red-100: #ffebee;
+    --color-red-500: #e53935;
+    --color-red-700: #c62828;
+
+    /* ============================================================
+     * 2. SEMANTIC COLOR ALIASES
+     * Components reference these (never the primitives directly).
+     * ============================================================ */
+
+    /* Text */
+    --text-primary:   var(--color-neutral-1000);
+    --text-secondary: var(--color-neutral-500);
+    --text-tertiary:  var(--color-neutral-0);
+    --text-disabled:  var(--color-neutral-300);
+    --text-placeholder: var(--color-neutral-300);
+    --text-brand:     var(--color-indigo-600);
+    --text-accent:    var(--color-cyan-500);
+    --text-success:   var(--color-green-500);
+    --text-warning:   var(--color-amber-700);
+    --text-error:     var(--color-red-500);
+    --text-link:      var(--color-indigo-600);
+
+    /* Surface (backgrounds) */
+    --surface-primary:         var(--color-neutral-0);
+    --surface-secondary:       var(--color-neutral-75);
+    --surface-secondary-light: var(--color-neutral-50);
+    --surface-tertiary:        var(--color-neutral-100);
+    --surface-brand:           var(--color-indigo-600);
+    --surface-brand-light:     var(--color-indigo-500);
+    --surface-brand-dark:      var(--color-indigo-800);
+    --surface-brand-minimal:   var(--color-indigo-100);
+    --surface-accent:          var(--color-cyan-500);
+    --surface-accent-minimal:  var(--color-cyan-50);
+    --surface-success:         var(--color-green-500);
+    --surface-success-light:   var(--color-green-50);
+    --surface-warning:         var(--color-amber-500);
+    --surface-warning-light:   var(--color-amber-50);
+    --surface-error:           var(--color-red-500);
+    --surface-error-minimal:   var(--color-red-50);
+    --surface-disabled:        var(--color-neutral-50);
+
+    /* Overlay (modal/drawer scrim) */
+    --surface-overlay:         rgba(38, 41, 43, 0.5);
+    --surface-overlay-light:   rgba(38, 41, 43, 0.25);
+
+    /* Border */
+    --border-primary:   var(--color-neutral-150);
+    --border-secondary: var(--color-neutral-75);
+    --border-tertiary:  var(--color-neutral-100);
+    --border-strong:    var(--color-neutral-300);
+    --border-brand:     var(--color-indigo-600);
+    --border-accent:    var(--color-cyan-500);
+    --border-success:   var(--color-green-500);
+    --border-warning:   var(--color-amber-500);
+    --border-error:     var(--color-red-500);
+    --border-disabled:  var(--color-neutral-100);
+
+    /* Icon */
+    --icon-primary:   var(--color-neutral-500);
+    --icon-secondary: var(--color-neutral-0);
+    --icon-contrast:  var(--color-neutral-1000);
+    --icon-disabled:  var(--color-neutral-300);
+    --icon-brand:     var(--color-indigo-600);
+    --icon-accent:    var(--color-cyan-500);
+    --icon-success:   var(--color-green-500);
+    --icon-warning:   var(--color-amber-500);
+    --icon-error:     var(--color-red-500);
+
+    /* Status — domain-specific (certificate validity).
+     * Used by Badge / StatusDot / DocumentChip throughout the app. */
+    --status-valid-bg:        var(--color-green-50);
+    --status-valid-fg:        var(--color-green-700);
+    --status-valid-border:    var(--color-green-500);
+    --status-expiring-bg:     var(--color-amber-50);
+    --status-expiring-fg:     var(--color-amber-700);
+    --status-expiring-border: var(--color-amber-500);
+    --status-expired-bg:      var(--color-red-50);
+    --status-expired-fg:      var(--color-red-700);
+    --status-expired-border:  var(--color-red-500);
+    --status-unlimited-bg:    var(--color-indigo-100);
+    --status-unlimited-fg:    var(--color-indigo-700);
+    --status-unlimited-border: var(--color-indigo-500);
+
+    /* ============================================================
+     * 3. TYPOGRAPHY
+     * Mirrors Figma Crewman/{Device}/{Style}/{Weight} text styles.
+     * ============================================================ */
+
+    /* Family */
+    --font-family-base:
+        "Montserrat",
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif;
+    --font-family-mono:
+        ui-monospace,
+        SFMono-Regular,
+        "SF Mono",
+        Menlo,
+        Consolas,
+        monospace;
+
+    /* Weight */
+    --font-weight-regular:  400;
+    --font-weight-medium:   500;
+    --font-weight-semibold: 600;
+    --font-weight-bold:     700;
+
+    /* Size scale (pixel-precise to match Figma mockups; rem-friendly when base = 16px) */
+    --font-size-2xs:  10px; /* mobile bottom tab label                  */
+    --font-size-xs:   11px; /* tablet tab / mobile caption-2            */
+    --font-size-sm:   12px; /* caption-1 / button label (medium)        */
+    --font-size-md:   13px; /* tablet caption-2                         */
+    --font-size-base: 14px; /* body                                     */
+    --font-size-lg:   16px;
+    --font-size-xl:   18px; /* h5 desktop / tablet body                 */
+    --font-size-2xl:  20px;
+    --font-size-3xl:  22px;
+    --font-size-4xl:  26px; /* h3 desktop                               */
+    --font-size-5xl:  32px;
+    --font-size-6xl:  40px;
+
+    /* Line height */
+    --line-height-tight:    1.2;
+    --line-height-default:  1.3;
+    --line-height-relaxed:  1.5;
+
+    /* Letter spacing */
+    --letter-spacing-tight:   -0.01em;
+    --letter-spacing-normal:   0;
+    --letter-spacing-wide:     0.02em;
+    --letter-spacing-uppercase: 0.06em;
+
+    /* ============================================================
+     * 4. SPACING — 4-pt grid
+     * ============================================================ */
+    --space-0:  0;
+    --space-1:  2px;
+    --space-2:  4px;
+    --space-3:  6px;
+    --space-4:  8px;
+    --space-5:  10px;
+    --space-6:  12px;
+    --space-7:  14px;
+    --space-8:  16px;
+    --space-10: 20px;
+    --space-12: 24px;
+    --space-14: 28px;
+    --space-16: 32px;
+    --space-20: 40px;
+    --space-24: 48px;
+    --space-32: 64px;
+    --space-40: 80px;
+    --space-48: 96px;
+    --space-64: 128px;
+
+    /* ============================================================
+     * 5. RADIUS
+     * ============================================================ */
+    --radius-none: 0;
+    --radius-xs:   2px;
+    --radius-sm:   4px;
+    --radius-md:   6px;
+    --radius-lg:   8px;
+    --radius-xl:   12px;
+    --radius-2xl:  16px;
+    --radius-3xl:  20px;
+    --radius-pill: 9999px;
+
+    /* ============================================================
+     * 6. SHADOWS
+     * ============================================================ */
+    --shadow-none:        none;
+    --shadow-xs:          0 1px 2px rgba(38, 41, 43, 0.06);
+    --shadow-sm:          0 2px 4px rgba(38, 41, 43, 0.08);
+    --shadow-md:          0 4px 12px rgba(139, 153, 160, 0.18);
+    --shadow-lg:          0 4px 20px rgba(139, 153, 160, 0.30); /* Figma "crewman/grey shadow" */
+    --shadow-xl:          0 8px 32px rgba(38, 41, 43, 0.18);
+    --shadow-focus-brand: 0 0 0 3px rgba(41, 56, 150, 0.32);
+    --shadow-focus-error: 0 0 0 3px rgba(229, 57, 53, 0.32);
+
+    /* ============================================================
+     * 7. Z-INDEX
+     * Predefined layering — never use arbitrary z-index values.
+     * ============================================================ */
+    --z-base:     0;
+    --z-content:  1;
+    --z-sticky:   100;
+    --z-dropdown: 1000;
+    --z-overlay:  1100;
+    --z-modal:    1200;
+    --z-popover:  1300;
+    --z-toast:    1400;
+    --z-tooltip:  1500;
+
+    /* ============================================================
+     * 8. BREAKPOINTS
+     * For JS read; CSS @media queries use the raw values directly.
+     *   mobile  : 0     – 767px
+     *   tablet  : 768   – 1279px
+     *   desktop : 1280  – 1439px
+     *   wide    : ≥ 1440px
+     * ============================================================ */
+    --breakpoint-mobile:  375px;
+    --breakpoint-tablet:  768px;
+    --breakpoint-desktop: 1280px;
+    --breakpoint-wide:    1440px;
+
+    /* ============================================================
+     * 9. MOTION
+     * ============================================================ */
+    --duration-instant: 60ms;
+    --duration-fast:    120ms;
+    --duration-base:    200ms;
+    --duration-slow:    320ms;
+    --easing-standard:     cubic-bezier(0.2, 0.0, 0.0, 1.0);
+    --easing-emphasized:   cubic-bezier(0.3, 0.0, 0.0, 1.0);
+    --easing-decelerate:   cubic-bezier(0.0, 0.0, 0.0, 1.0);
+    --easing-accelerate:   cubic-bezier(0.4, 0.0, 1.0, 1.0);
+
+    /* ============================================================
+     * 10. COMPONENT-LEVEL TOKENS
+     * ============================================================ */
+
+    /* Touch — WCAG 2.5.5 minimum 44 px on touch devices */
+    --touch-target-min: 44px;
+
+    /* Control heights (Button, Input, Select, …) */
+    --control-height-xs: 24px;
+    --control-height-sm: 28px;
+    --control-height-md: 36px;
+    --control-height-lg: 44px;
+    --control-height-xl: 52px;
+
+    /* Layout */
+    --layout-width: 1314px;
+    --layout-content-padding: 24px;
+
+    /* Page horizontal padding by device */
+    --page-padding-x-mobile:  16px;
+    --page-padding-x-tablet:  24px;
+    --page-padding-x-desktop: 32px;
+
+    /* Focus ring */
+    --focus-ring-width:  2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color:  var(--color-indigo-500);
+
+    /* Density scale (1 = comfortable, 0.875 = compact). Components that
+     * support density multiply their internal paddings by this value. */
+    --ds-density: 1;
+
+    /* Safe-area insets (iOS Capacitor). Fall back to 0 in browsers. */
+    --safe-area-top:    env(safe-area-inset-top, 0px);
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-left:   env(safe-area-inset-left, 0px);
+    --safe-area-right:  env(safe-area-inset-right, 0px);
+}
+
+/* ============================================================
+ * DARK MODE — placeholder; palette TBD.
+ * Activate by setting `data-theme="dark"` on <html> or any ancestor.
+ * ============================================================ */
+[data-theme="dark"] {
+    /* TODO: dark palette. Keeping selector reserved so consumers can
+     * already write theme-aware CSS without churning later. */
+}
+
+/* ============================================================
+ * REDUCED MOTION — respect user preference.
+ * ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --duration-instant: 0ms;
+        --duration-fast:    0ms;
+        --duration-base:    0ms;
+        --duration-slow:    0ms;
+    }
+}
+
+/* ============================================================
+ * COMPACT DENSITY — opt-in via data attribute.
+ * ============================================================ */
+[data-density="compact"] {
+    --ds-density: 0.875;
+    --control-height-sm: 24px;
+    --control-height-md: 32px;
+    --control-height-lg: 40px;
+}

package/dist/styles/typography.css

@@ -0,0 +1,169 @@
+/* =====================================================================
+ * Typography utility classes — mirror Figma `Crewman/{Device}/{Style}/{Weight}`
+ * text styles. Components either use a `.ds-text-*` class directly or
+ * compose `font-size` / `line-height` / `font-weight` tokens manually.
+ *
+ * Naming: `.ds-text-{role}-{size}-{weight}`. Examples:
+ *   .ds-text-display     — large hero numbers / titles
+ *   .ds-text-h3          — section heading (Desktop/H3/Semibold, 26px)
+ *   .ds-text-h5          — card heading        (Desktop/H5/Semibold, 18px)
+ *   .ds-text-body        — base body 14px
+ *   .ds-text-caption-1   — 12px caption
+ *   .ds-text-caption-2   — 11px caption (mobile)
+ *   .ds-text-tab         — 10–11px tab label
+ * ===================================================================== */
+
+.ds-text-display {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-5xl);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h1 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-6xl);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h2 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-5xl);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h3 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-4xl);
+    line-height: var(--line-height-default);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h4 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-3xl);
+    line-height: var(--line-height-default);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h5 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-default);
+    font-weight: var(--font-weight-semibold);
+}
+
+.ds-text-h6 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-default);
+    font-weight: var(--font-weight-semibold);
+}
+
+/* Body 14 */
+.ds-text-body {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-regular);
+}
+.ds-text-body-medium {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-medium);
+}
+.ds-text-body-semibold {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+/* Caption 1 — 12 */
+.ds-text-caption-1 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-regular);
+}
+.ds-text-caption-1-semibold {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+/* Caption 2 — 11 */
+.ds-text-caption-2 {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-regular);
+}
+.ds-text-caption-2-semibold {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+}
+
+/* Tab label — 10–11 */
+.ds-text-tab {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-2xs);
+    line-height: 1;
+    font-weight: var(--font-weight-regular);
+}
+.ds-text-tab-semibold {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-default);
+    font-weight: var(--font-weight-semibold);
+}
+
+/* Overline — uppercase utility label */
+.ds-text-overline {
+    font-family: var(--font-family-base);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-tight);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-uppercase);
+    text-transform: uppercase;
+}
+
+/* Code / monospace */
+.ds-text-code {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-tight);
+}
+
+/* Color helpers — chain with any size class above */
+.ds-text-color-primary   { color: var(--text-primary); }
+.ds-text-color-secondary { color: var(--text-secondary); }
+.ds-text-color-tertiary  { color: var(--text-tertiary); }
+.ds-text-color-disabled  { color: var(--text-disabled); }
+.ds-text-color-brand     { color: var(--text-brand); }
+.ds-text-color-accent    { color: var(--text-accent); }
+.ds-text-color-success   { color: var(--text-success); }
+.ds-text-color-warning   { color: var(--text-warning); }
+.ds-text-color-error     { color: var(--text-error); }
+
+/* Truncate single line */
+.ds-text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Clamp N lines (set --ds-clamp-lines inline) */
+.ds-text-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--ds-clamp-lines, 2);
+    line-clamp: var(--ds-clamp-lines, 2);
+    overflow: hidden;
+}

package/dist/styles.css

@@ -0,0 +1,33 @@
+/* Foundations — must load before components so CSS vars are defined. */
+@import "./styles/tokens.css";
+@import "./styles/typography.css";
+
+/* Components */
+@import "./styles/Button.css";
+@import "./styles/TextField.css";
+@import "./styles/CheckboxField.css";
+@import "./styles/ToggleField.css";
+@import "./styles/Icon.css";
+@import "./styles/Card.css";
+@import "./styles/Page.css";
+@import "./styles/Badge.css";
+@import "./styles/StatusBadge.css";
+@import "./styles/Checkbox.css";
+@import "./styles/Toggle.css";
+@import "./styles/Tag.css";
+@import "./styles/Avatar.css";
+@import "./styles/IconButton.css";
+@import "./styles/Breadcrumbs.css";
+@import "./styles/SidebarMenu.css";
+@import "./styles/Delimeter.css";
+@import "./styles/ShadowedBlock.css";
+@import "./styles/DetailItem.css";
+@import "./styles/InformationPanel.css";
+@import "./styles/DropdownButton.css";
+@import "./styles/CollapsibleFields.css";
+@import "./styles/Pagination.css";
+@import "./styles/Tabs.css";
+@import "./styles/Tooltip.css";
+@import "./styles/Popover.css";
+@import "./styles/FileUpload.css";
+@import "./styles/Error.css";