@crewlethq/ui 0.2.0 → 0.3.0

package/dist/DateTimePicker-NMSSGVPK.css

@@ -1,312 +0,0 @@
-/*
- * DateTimePicker, a themed replacement for <input type="datetime-local">.
- * Trigger borrows the Select trigger's geometry so a DateTimePicker
- * and a Select line up in the same toolbar; the popover paints its
- * own calendar grid + (optional) hour / minute inputs.
- */
-
-/* The accent variables are declared on the trigger AND on the calendar
-   popover. The popover is portaled to <body>, so it inherits nothing
-   from the trigger; declaring them on the trigger alone leaves the
-   selected day, the focused time input and the primary footer button
-   resolving an undefined variable and painting transparent. Both read
-   the brand accent tokens, so an app retints the picker by rebinding
-   --color-brand-accent and --color-brand-accent-rgb on <body>. */
-.crewlet-datetime,
-.crewlet-datetime__popover {
-  --crewlet-datetime-accent: var(--color-brand-accent, #5469d4);
-  --crewlet-datetime-accent-rgb: var(--color-brand-accent-rgb, 84, 105, 212);
-}
-
-.crewlet-datetime {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px 8px 12px;
-  background: var(--color-surface-elevated, #1f2128);
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  color: var(--color-text-primary, #f5f5f7);
-  font-family: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.crewlet-datetime--sm {
-  padding: 6px 8px 6px 10px;
-  font-size: 12px;
-}
-
-.crewlet-datetime:hover:not(:disabled) {
-  border-color: var(--color-border-strong, rgba(255, 255, 255, 0.18));
-}
-
-.crewlet-datetime:focus,
-.crewlet-datetime.is-open {
-  outline: none;
-  border-color: var(--crewlet-datetime-accent);
-  box-shadow: 0 0 0 3px rgba(var(--crewlet-datetime-accent-rgb), 0.15);
-}
-
-.crewlet-datetime.is-disabled,
-.crewlet-datetime:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.crewlet-datetime__icon {
-  font-size: 16px;
-  color: var(--color-text-secondary, #c9ced8);
-  flex-shrink: 0;
-}
-
-.crewlet-datetime__label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-datetime__label.is-placeholder {
-  color: var(--color-text-tertiary, #8c99ad);
-}
-
-.crewlet-datetime__chevron {
-  font-size: 18px;
-  color: var(--color-text-tertiary, #8c99ad);
-  flex-shrink: 0;
-}
-
-/* ─── Popover panel ─────────────────────────────────────────── */
-/*
- * The base .crewlet-popover rule caps height at min(360px, 60vh) and
- * scrolls overflow. The picker's content (quick-pick row + nav +
- * weekday strip + 6-row grid + time inputs + footer) is taller than
- * that, which made the time row sit below the scroll fold. Override
- * max-height/max-width to none and disable inner scroll so every
- * section is visible without scrolling.
- */
-/*
- * Popover matches the trigger width via Popover width="match" so the
- * calendar lines up edge-for-edge with the input that opened it. The
- * min-width floor keeps the calendar grid usable when the trigger
- * sits inside a narrow cell (e.g. a form row); the explicit overrides
- * lift the base Popover's max-height / max-width / overflow so the
- * calendar, time row, and footer render in full.
- */
-.crewlet-datetime__popover {
-  padding: 0;
-  background: var(--color-surface-subtle, var(--color-surface-elevated, #1c1e24));
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
-  border-radius: 10px;
-  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.45));
-  overflow: visible;
-  min-width: 320px;
-  max-width: none;
-  max-height: none;
-}
-
-.crewlet-datetime__panel {
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  gap: 8px;
-}
-
-
-/* ─── Month nav header ──────────────────────────────────────── */
-.crewlet-datetime__nav {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.crewlet-datetime__nav-btn {
-  background: transparent;
-  border: 0;
-  color: var(--color-text-secondary, #c9ced8);
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-
-.crewlet-datetime__nav-btn:hover {
-  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.08));
-  color: var(--color-text-primary, #fafafa);
-}
-
-.crewlet-datetime__nav-btn .material-symbols-outlined {
-  font-size: 18px;
-}
-
-.crewlet-datetime__title {
-  flex: 1;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-primary, #fafafa);
-}
-
-/* ─── Weekday header strip ──────────────────────────────────── */
-.crewlet-datetime__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-  padding: 0 2px;
-}
-
-.crewlet-datetime__weekday {
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-tertiary, #8c99ad);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 4px 0;
-}
-
-/* ─── Calendar grid ─────────────────────────────────────────── */
-.crewlet-datetime__grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-}
-
-.crewlet-datetime__cell {
-  height: 32px;
-  background: transparent;
-  border: 0;
-  border-radius: 6px;
-  color: var(--color-text-primary, #fafafa);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.crewlet-datetime__cell:hover:not(:disabled):not(.is-selected) {
-  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.08));
-}
-
-.crewlet-datetime__cell.is-outside {
-  color: var(--color-text-tertiary, #8c99ad);
-  opacity: 0.55;
-}
-
-.crewlet-datetime__cell.is-today:not(.is-selected) {
-  /* Subtle outline so today's cell is always findable even when no
-     date is picked. The accent inset keeps it visible on every surface. */
-  box-shadow: inset 0 0 0 1px rgba(var(--crewlet-datetime-accent-rgb), 0.55);
-}
-
-.crewlet-datetime__cell.is-selected {
-  background: var(--crewlet-datetime-accent);
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.crewlet-datetime__cell.is-disabled,
-.crewlet-datetime__cell:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* ─── Time row ──────────────────────────────────────────────── */
-.crewlet-datetime__time {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 4px 0;
-  border-top: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.06));
-  margin-top: 4px;
-}
-
-.crewlet-datetime__time-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-text-tertiary, #8c99ad);
-  margin-right: auto;
-}
-
-/*
- * Hour / minute / second inputs render as type="text" so leading
- * zeros stay visible ("00 : 00 : 00" instead of "0 : 0 : 0"). The
- * inputMode + pattern attrs keep mobile keyboards numeric.
- */
-.crewlet-datetime__time-input {
-  width: 36px;
-  background: var(--color-surface-elevated, #1f2128);
-  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
-  border-radius: 6px;
-  padding: 4px 6px;
-  font: inherit;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-primary, #fafafa);
-  text-align: center;
-}
-
-.crewlet-datetime__time-input:focus {
-  outline: none;
-  border-color: var(--crewlet-datetime-accent);
-  box-shadow: 0 0 0 2px rgba(var(--crewlet-datetime-accent-rgb), 0.18);
-}
-
-.crewlet-datetime__time-sep {
-  color: var(--color-text-tertiary, #8c99ad);
-}
-
-/* ─── Footer ────────────────────────────────────────────────── */
-.crewlet-datetime__footer {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding-top: 8px;
-  border-top: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.06));
-}
-
-.crewlet-datetime__footer-spacer {
-  flex: 1;
-}
-
-.crewlet-datetime__footer-btn {
-  background: transparent;
-  border: 0;
-  font: inherit;
-  font-size: 12px;
-  color: var(--color-text-secondary, #c9ced8);
-  cursor: pointer;
-  padding: 6px 10px;
-  border-radius: 6px;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-
-.crewlet-datetime__footer-btn:hover {
-  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.08));
-  color: var(--color-text-primary, #fafafa);
-}
-
-.crewlet-datetime__footer-btn.is-primary {
-  background: var(--crewlet-datetime-accent);
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.crewlet-datetime__footer-btn.is-primary:hover {
-  background: var(--crewlet-datetime-accent);
-  filter: brightness(1.08);
-}

package/dist/Eyebrow-AVBORAS2.css

@@ -1,30 +0,0 @@
-/*
- * Eyebrow (kicker), the uppercase section label. Monospace, tracked-out,
- * and quiet so it names a section without competing with its title.
- */
-
-.crewlet-eyebrow {
-  display: inline-block;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  line-height: var(--font-line-height-tight);
-}
-
-.crewlet-eyebrow--muted {
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-eyebrow--accent {
-  color: var(--color-brand-accent);
-}
-
-.crewlet-eyebrow--gradient {
-  background: var(--color-brand-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-}

package/dist/IconButton-GB4PJDG2.css

@@ -1,82 +0,0 @@
-/*
- * IconButton, square icon-only affordance.
- *
- * Two square sizes: 22x22 fits inline beside a form label, and 28x28
- * matches the min-height of a small Button. Variant accents use the brand accent (lavender) and the
- * feedback-danger (rose) tokens.
- */
-
-.crewlet-icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  line-height: 1;
-  flex-shrink: 0;
-  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-}
-
-.crewlet-icon-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.32));
-}
-
-.crewlet-icon-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* ── Sizes ──────────────────────────────────────────────────────── */
-.crewlet-icon-btn--sm { width: 22px; height: 22px; }
-.crewlet-icon-btn--md { width: 28px; height: 28px; }
-
-/* The icon glyph inside scales with the button size. */
-.crewlet-icon-btn--sm .material-symbols-outlined { font-size: 14px; }
-.crewlet-icon-btn--md .material-symbols-outlined { font-size: 18px; }
-
-/* ── ghost: transparent surface, neutral text, mild tint on hover ── */
-.crewlet-icon-btn--ghost {
-  color: var(--color-text-secondary);
-}
-.crewlet-icon-btn--ghost:hover:not(:disabled) {
-  background: var(--color-surface-elevated, var(--color-surface-subtle));
-  color: var(--color-text-primary);
-}
-
-/* ── ghost-brand: transparent → lavender-soft on hover ─────────── */
-.crewlet-icon-btn--ghost-brand {
-  color: var(--color-text-tertiary);
-}
-.crewlet-icon-btn--ghost-brand:hover:not(:disabled) {
-  background: var(--color-brand-accent-soft, rgba(84, 105, 212, 0.10));
-  border-color: var(--color-brand-accent-soft-strong, rgba(84, 105, 212, 0.32));
-  color: var(--color-brand-accent, #5469d4);
-}
-
-/* ── ghost-danger: transparent → rose-soft on hover ─────────────── */
-.crewlet-icon-btn--ghost-danger {
-  color: var(--color-text-tertiary);
-}
-.crewlet-icon-btn--ghost-danger:hover:not(:disabled) {
-  background: rgba(244, 63, 94, 0.10);
-  color: var(--color-feedback-danger, #f43f5e);
-}
-
-/*
- * ── soft-brand: lavender-tinted square with matching outline. The
- *    add affordance beside a form label (for example "Add a policy").
- */
-.crewlet-icon-btn--soft-brand {
-  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.12);
-  border-color: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.3);
-  color: var(--color-brand-accent, #5469d4);
-}
-.crewlet-icon-btn--soft-brand:hover:not(:disabled) {
-  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.22);
-  border-color: var(--color-brand-accent, #5469d4);
-}

package/dist/ImageUpload-3HQDF2KC.css

@@ -1,158 +0,0 @@
-/*
- * ImageUpload, click-to-upload affordance built on Avatar.
- *
- * Colour properties go through the @crewlethq/tokens variables, with literal
- * fallbacks so the control still renders when the token stylesheet has not
- * loaded.
- */
-
-.crewlet-image-upload {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  width: var(--crewlet-image-upload-size, 64px);
-  height: var(--crewlet-image-upload-size, 64px);
-}
-
-.crewlet-image-upload__trigger {
-  position: relative;
-  display: inline-flex;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-}
-
-/* Shape modifiers keep the trigger, overlay, and Avatar corners in sync. */
-.crewlet-image-upload--circle .crewlet-image-upload__trigger,
-.crewlet-image-upload--circle .crewlet-image-upload__overlay {
-  border-radius: var(--radius-circle, 50%);
-}
-
-.crewlet-image-upload--square .crewlet-image-upload__trigger,
-.crewlet-image-upload--square .crewlet-image-upload__overlay {
-  border-radius: var(--radius-lg, 12px);
-}
-
-.crewlet-image-upload__trigger:disabled {
-  cursor: default;
-}
-
-.crewlet-image-upload.is-uploading .crewlet-image-upload__trigger {
-  cursor: progress;
-}
-
-.crewlet-image-upload__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
-}
-
-.crewlet-image-upload__overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-  background: rgba(0, 0, 0, 0.5);
-  color: #ffffff;
-  opacity: 0;
-  transition: opacity 0.2s ease, background 0.15s ease;
-  pointer-events: none;
-}
-
-.crewlet-image-upload__trigger:hover .crewlet-image-upload__overlay,
-.crewlet-image-upload__trigger:focus-visible .crewlet-image-upload__overlay {
-  opacity: 1;
-}
-
-.crewlet-image-upload.is-uploading .crewlet-image-upload__overlay,
-.crewlet-image-upload.is-empty .crewlet-image-upload__overlay {
-  opacity: 1;
-}
-
-.crewlet-image-upload__overlay .material-symbols-outlined {
-  font-size: calc(var(--crewlet-image-upload-size, 64px) * 0.28);
-  color: #ffffff;
-  transition: color 0.15s ease;
-}
-
-.crewlet-image-upload__overlay-text {
-  font-size: 10px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
-  transition: color 0.15s ease;
-}
-
-/* Hovering an editable control brightens the overlay: a deeper scrim with the
-   label and icon at full white, so a control whose overlay is already showing
-   (nothing uploaded yet) still answers the pointer. */
-.crewlet-image-upload__trigger:hover:not(:disabled) .crewlet-image-upload__overlay {
-  background: rgba(0, 0, 0, 0.66);
-}
-
-.crewlet-image-upload__trigger:hover:not(:disabled) .crewlet-image-upload__overlay .material-symbols-outlined,
-.crewlet-image-upload__trigger:hover:not(:disabled) .crewlet-image-upload__overlay-text {
-  color: #ffffff;
-}
-
-.crewlet-image-upload__spinner {
-  width: calc(var(--crewlet-image-upload-size, 64px) * 0.3);
-  height: calc(var(--crewlet-image-upload-size, 64px) * 0.3);
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-top-color: #ffffff;
-  animation: crewlet-image-upload-spin 0.7s linear infinite;
-}
-
-@keyframes crewlet-image-upload-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.crewlet-image-upload__remove {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  z-index: 2;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--color-feedback-danger, #f43f5e);
-  border: 2px solid var(--color-surface-background, #15171c);
-  color: #ffffff;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.crewlet-image-upload:hover .crewlet-image-upload__remove,
-.crewlet-image-upload__remove:focus-visible {
-  opacity: 1;
-}
-
-.crewlet-image-upload__remove:disabled {
-  cursor: default;
-}
-
-.crewlet-image-upload__remove:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
-}
-
-.crewlet-image-upload__remove .material-symbols-outlined {
-  font-size: 12px;
-}
-
-.crewlet-image-upload__input {
-  display: none;
-}