@crewlethq/ui 0.2.0

package/dist/Input-ZHUTN7CU.css

@@ -0,0 +1,210 @@
+/*
+ * Form primitives, Input / Textarea / Label / FormField / FormRow.
+ *
+ * Two sizes: md (14px text, 10/14px padding) for form rows, and sm
+ * (13px text, 6/10px padding) for dense toolbars and inline filters.
+ */
+
+.crewlet-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.crewlet-input:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.15));
+}
+
+.crewlet-input.is-error {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-input.is-error:focus-within {
+  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
+}
+
+.crewlet-input.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.crewlet-input__control {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  color: var(--color-text-primary);
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 10px 14px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.crewlet-input__control::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+}
+
+.crewlet-input__control:disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-input--sm .crewlet-input__control { padding: 6px 10px; font-size: 13px; }
+.crewlet-input--md .crewlet-input__control { padding: 10px 14px; font-size: 14px; }
+
+/* Trailing content sits at the field's right edge, out of the pointer's way
+   so a click on it still lands in the field. */
+.crewlet-input__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding-right: 10px;
+  pointer-events: none;
+}
+
+.crewlet-input--sm .crewlet-input__trailing { padding-right: 8px; }
+
+/* ── Textarea ────────────────────────────────────────────────────────── */
+/* A textarea with trailing content is wrapped so the content can sit inside
+   its top right corner; the textarea itself is unchanged. */
+.crewlet-textarea-shell {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.crewlet-textarea-shell .crewlet-textarea {
+  padding-right: 72px;
+}
+
+.crewlet-textarea-shell .crewlet-input__trailing {
+  position: absolute;
+  top: 9px;
+  right: 0;
+}
+
+.crewlet-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+  outline: none;
+  resize: vertical;
+  min-height: 88px;
+}
+
+.crewlet-textarea:focus {
+  border-color: var(--color-brand-accent);
+  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.15));
+}
+
+.crewlet-textarea.is-error {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-textarea.is-error:focus {
+  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
+}
+
+.crewlet-textarea.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.crewlet-textarea.is-auto-resize {
+  resize: none;
+  overflow: hidden;
+  min-height: 40px;
+}
+
+.crewlet-textarea::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+}
+
+/* ── Label ───────────────────────────────────────────────────────────── */
+.crewlet-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  letter-spacing: -0.005em;
+}
+
+.crewlet-label--with-action {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+}
+
+.crewlet-label__text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  letter-spacing: -0.005em;
+}
+
+.crewlet-label__required {
+  color: var(--color-feedback-danger, #e5484d);
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+.crewlet-label__action {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ── FormField ───────────────────────────────────────────────────────── */
+.crewlet-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.crewlet-form-field__helper {
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-form-field__error {
+  font-size: 12px;
+  color: var(--color-feedback-danger, #e5484d);
+}
+
+/* ── FormRow ─────────────────────────────────────────────────────────── */
+.crewlet-form-row {
+  display: grid;
+  gap: 16px;
+}
+
+.crewlet-form-row--1 { grid-template-columns: 1fr; }
+.crewlet-form-row--2 { grid-template-columns: repeat(2, 1fr); }
+.crewlet-form-row--3 { grid-template-columns: repeat(3, 1fr); }
+
+@media (max-width: 768px) {
+  .crewlet-form-row--2,
+  .crewlet-form-row--3 { grid-template-columns: 1fr; }
+}

package/dist/Kbd-Q77CDZY7.css

@@ -0,0 +1,23 @@
+/* A keycap: the key's name on a small raised tile. */
+.crewlet-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 5px;
+  border: 1px solid var(--color-border-default);
+  border-bottom-width: 2px;
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.crewlet-kbd--subtle {
+  opacity: 0.7;
+}

package/dist/Modal-FJVG66S4.css

@@ -0,0 +1,138 @@
+/*
+ * Modal, portal-rendered dialog with backdrop, header, body, footer.
+ *
+ * Sizes, padding, radius, shadow and animation timings are declared
+ * here once, so every dialog (Modal, ConfirmModal, the DataTable
+ * settings dialog) shares one frame.
+ */
+
+.crewlet-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* The stacking order for everything that escapes the page flow (modal,
+     popover, toast) is one scale in @crewlethq/tokens (zIndex), because
+     the relationship between the layers is the whole point; numbering
+     each component on its own is how they came to disagree. */
+  z-index: var(--z-index-modal, 9999);
+  padding: 24px;
+  animation: crewlet-modal-fade-in 0.15s ease-out;
+}
+
+.crewlet-modal {
+  width: 100%;
+  background: var(--color-surface-elevated, #131419);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: 14px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 48px);
+  animation: crewlet-modal-pop 0.18s ease-out;
+  outline: none;
+}
+
+.crewlet-modal--sm { max-width: 480px; }
+.crewlet-modal--md { max-width: 560px; }
+.crewlet-modal--lg { max-width: 720px; }
+.crewlet-modal--xl { max-width: 1080px; }
+
+.crewlet-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 22px 14px;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-modal__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.crewlet-modal__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.crewlet-modal__subtitle {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.crewlet-modal__close {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.crewlet-modal__close:hover {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+}
+
+.crewlet-modal__body {
+  padding: 18px 22px;
+  overflow-y: auto;
+  /* Set here rather than inherited. A dialog is read at a glance and
+     sits over a page whose base size it should not borrow, which is
+     how the same sentence came out larger in one product than another. */
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--color-text-secondary);
+}
+
+/* Paragraphs stack without the browser's default margins fighting the
+   body padding, which is what left dialogs uneven top and bottom. */
+.crewlet-modal__body > p {
+  margin: 0 0 12px;
+}
+
+.crewlet-modal__body > p:last-child {
+  margin-bottom: 0;
+}
+
+.crewlet-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 22px 18px;
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-modal__message {
+  margin: 0;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+}
+
+@keyframes crewlet-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes crewlet-modal-pop {
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)  scale(1); }
+}

package/dist/Popover-FUFULUE2.css

@@ -0,0 +1,123 @@
+/* Generic popover panel. Portaled to <body> so it can escape any
+   ancestor's overflow:hidden. Colours come from the canonical
+   @crewlethq/tokens variables, so the chrome matches whichever palette
+   is active. The panel mounts under <body>, so an app that rebinds
+   the accent tokens declares the override on <body> or <html>. */
+
+.crewlet-popover {
+  position: absolute;
+  z-index: var(--z-index-popover, 10000);
+  background: var(--color-surface-subtle, #15171c);
+  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
+  border-radius: 12px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+  outline: none;
+  min-width: 200px;
+  max-width: 380px;
+  max-height: min(360px, 60vh);
+  overflow-y: auto;
+  animation: crewlet-popover-in 120ms ease-out;
+}
+
+.crewlet-popover--bottom {
+  transform-origin: top left;
+}
+
+.crewlet-popover--top {
+  transform-origin: bottom left;
+}
+
+@keyframes crewlet-popover-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Menu list inside a popover. Option rows look identical to the
+   ones in Select so the visual register stays consistent. */
+.crewlet-popover__list {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.crewlet-popover__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary, #f5f5f7);
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  width: 100%;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.crewlet-popover__item:hover,
+.crewlet-popover__item:focus-visible {
+  background: rgba(var(--color-brand-accent-rgb, 84, 105, 212), 0.14);
+  color: var(--color-brand-accent, #5469d4);
+  outline: none;
+}
+
+.crewlet-popover__item.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-popover__item.is-active {
+  color: var(--crewlet-select-accent, var(--color-brand-accent, #5469d4));
+}
+
+.crewlet-popover__item-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.crewlet-popover__item-spacer {
+  flex: 1;
+}
+
+.crewlet-popover__item-trail {
+  font-size: 11px;
+  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
+}
+
+/* Section headings inside a multi-section popover, for example a
+   "Filters" heading above a group of items. */
+.crewlet-popover__heading {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
+  padding: 10px 12px 4px;
+}
+
+.crewlet-popover__divider {
+  height: 1px;
+  background: var(--color-border-default, rgba(255, 255, 255, 0.08));
+  margin: 4px 0;
+}
+
+/* Inline editor: a popover that hosts a single Select or input while
+   a value is edited in place. Sized snug around the control. */
+.crewlet-popover__editor {
+  padding: 10px;
+  min-width: 240px;
+}
+
+.crewlet-popover__editor-label {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary, rgba(245, 245, 247, 0.55));
+  margin-bottom: 6px;
+  display: block;
+}