@skygraph/styles 0.0.0-placeholder.0 → 0.2.0

package/components/datagrid.css

@@ -0,0 +1,86 @@
+.sg-datagrid {
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg);
+  font-size: var(--sg-font-size);
+  outline: none;
+}
+
+.sg-datagrid:focus-within {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-datagrid-header {
+  background: var(--sg-color-bg-secondary);
+  border-bottom: 1px solid var(--sg-color-border);
+  font-weight: 600;
+}
+
+.sg-datagrid-header-cell {
+  border-right: 1px solid var(--sg-color-border-secondary);
+  box-sizing: border-box;
+}
+
+.sg-datagrid-header-cell:last-child {
+  border-right: none;
+}
+
+.sg-datagrid-header-cell--sortable:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-datagrid-row {
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-datagrid-row:hover .sg-datagrid-cell {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-datagrid-cell {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-sm);
+  border-right: 1px solid var(--sg-color-border-secondary);
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-datagrid-cell:last-child {
+  border-right: none;
+}
+
+.sg-datagrid-cell--active {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+  z-index: var(--sg-z-base);
+}
+
+.sg-datagrid-cell--editing {
+  padding: 0;
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+  z-index: calc(var(--sg-z-base) + 1);
+}
+
+.sg-datagrid-cell--selected {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-datagrid-cell--frozen {
+  position: sticky;
+  z-index: var(--sg-z-sticky);
+  background: var(--sg-color-bg);
+}
+
+.sg-datagrid-resizer:hover {
+  background: var(--sg-color-primary);
+}
+
+.sg-datagrid-empty {
+  color: var(--sg-color-text-tertiary);
+}

package/components/datepicker.css

@@ -0,0 +1,601 @@
+/* ═══════════════════════════════════════════════════════
+   DatePicker / RangePicker
+   ═══════════════════════════════════════════════════════ */
+
+.sg-datepicker {
+  position: relative;
+  display: inline-block;
+  /* Match the trigger min-width so flex parents do not squeeze below one full field + suffix. */
+  min-width: 200px;
+  max-width: 100%;
+}
+
+.sg-datepicker.sg-datepicker-range {
+  min-width: 320px;
+}
+
+.sg-datepicker-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Input trigger ── */
+
+.sg-datepicker-input {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  height: var(--sg-height-md);
+  /* Symmetric horizontal padding so the suffix icon stays inside the border (long placeholders + flex shrink). */
+  padding: 0 var(--sg-padding-md) 0 var(--sg-padding-md);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg-container);
+  cursor: pointer;
+  min-width: 200px;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  transition:
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-datepicker-input:hover {
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-datepicker-open .sg-datepicker-input {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-datepicker-input:focus-visible {
+  outline: none;
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-datepicker-input-text {
+  /* `flex-basis: 0` + `min-width: 0` avoids `<input>` intrinsic min-width from long placeholders eating the suffix. */
+  flex: 1 1 0;
+  min-width: 0;
+  width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sg-datepicker-placeholder {
+  color: var(--sg-color-text-quaternary);
+}
+
+.sg-datepicker-suffix {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  margin-left: auto;
+  color: var(--sg-color-text-tertiary);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.sg-datepicker-icon {
+  opacity: 0.65;
+}
+
+.sg-datepicker-clear {
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  line-height: 1;
+  color: var(--sg-color-text-quaternary);
+  transition: color var(--sg-transition-duration);
+}
+
+.sg-datepicker-clear:hover {
+  color: var(--sg-color-text-secondary);
+}
+
+/* Size variants */
+
+.sg-datepicker.sg-datepicker-small {
+  min-width: 170px;
+}
+
+.sg-datepicker.sg-datepicker-large {
+  min-width: 230px;
+}
+
+.sg-datepicker-small .sg-datepicker-input {
+  height: var(--sg-height-sm);
+  font-size: var(--sg-font-size-sm);
+  min-width: 170px;
+}
+
+.sg-datepicker-large .sg-datepicker-input {
+  height: var(--sg-height-lg);
+  font-size: var(--sg-font-size-lg);
+  min-width: 230px;
+}
+
+/* ── Range input ── */
+
+.sg-datepicker-range-input {
+  min-width: 320px;
+  justify-content: flex-start;
+}
+
+.sg-datepicker-range-part {
+  color: var(--sg-color-text);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: var(--sg-border-radius-sm);
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-datepicker-range-active {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-datepicker-separator {
+  color: var(--sg-color-text-quaternary);
+  padding: 0 var(--sg-padding-xs);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Dropdown
+   ═══════════════════════════════════════════════════════ */
+
+.sg-dp-dropdown {
+  position: absolute;
+  z-index: var(--sg-z-dropdown);
+  margin-top: var(--sg-padding-xs);
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  overflow: hidden;
+}
+
+.sg-dp-dropdown-bottomLeft {
+  top: 100%;
+  left: 0;
+}
+.sg-dp-dropdown-bottomRight {
+  top: 100%;
+  right: 0;
+}
+.sg-dp-dropdown-topLeft {
+  bottom: 100%;
+  left: 0;
+  margin-top: 0;
+  margin-bottom: var(--sg-padding-xs);
+}
+.sg-dp-dropdown-topRight {
+  bottom: 100%;
+  right: 0;
+  margin-top: 0;
+  margin-bottom: var(--sg-padding-xs);
+}
+
+.sg-dp-dropdown-inner {
+  display: flex;
+  min-width: 0;
+}
+
+.sg-dp-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* ── Presets sidebar ── */
+
+.sg-dp-presets {
+  border-right: 1px solid var(--sg-color-border-secondary);
+  padding: var(--sg-padding-sm);
+  min-width: 120px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.sg-dp-preset-item {
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  border-radius: var(--sg-border-radius-sm);
+  cursor: pointer;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+  white-space: nowrap;
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-dp-preset-item:hover {
+  background: var(--sg-color-bg-hover);
+  color: var(--sg-color-primary);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Calendar panel
+   ═══════════════════════════════════════════════════════ */
+
+.sg-dp-panel {
+  padding: var(--sg-padding-sm);
+  min-width: 280px;
+}
+
+.sg-dp-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 var(--sg-padding-sm) 0;
+}
+
+.sg-dp-panel-title {
+  font-weight: 600;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  cursor: default;
+}
+
+/* Clickable month/year title (single DatePicker) — replaces the old footer link. */
+button.sg-dp-panel-title.sg-dp-panel-title-btn {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 2px var(--sg-padding-xs);
+  margin: 0;
+  border-radius: var(--sg-border-radius-sm);
+  font: inherit;
+  font-weight: 600;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration);
+}
+
+button.sg-dp-panel-title.sg-dp-panel-title-btn:hover {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dp-nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sg-height-sm);
+  height: var(--sg-height-sm);
+  border: none;
+  border-radius: var(--sg-border-radius-sm);
+  background: transparent;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  line-height: 1;
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+  padding: 0;
+}
+
+.sg-dp-nav-btn:hover {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-bg-hover);
+}
+
+/* ── Day table ── */
+
+.sg-dp-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.sg-dp-th {
+  padding: var(--sg-padding-xs) 0;
+  text-align: center;
+  font-weight: 500;
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-dp-cell {
+  padding: 2px;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.sg-dp-cell-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  font-size: var(--sg-font-size-sm);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+  line-height: 1;
+}
+
+.sg-dp-cell:hover .sg-dp-cell-inner {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dp-cell-outside {
+  color: var(--sg-color-text-disabled);
+}
+
+.sg-dp-cell-today .sg-dp-cell-inner {
+  border: 1px solid var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+
+.sg-dp-cell-selected .sg-dp-cell-inner {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-dp-cell-selected:hover .sg-dp-cell-inner {
+  background: var(--sg-color-primary-hover);
+}
+
+.sg-dp-cell-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-dp-cell-disabled:hover .sg-dp-cell-inner {
+  background: transparent;
+}
+
+/* Range selection highlighting */
+
+.sg-dp-cell-in-range {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-dp-cell-range-start .sg-dp-cell-inner,
+.sg-dp-cell-range-end .sg-dp-cell-inner {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-dp-cell-range-start {
+  border-radius: 50% 0 0 50%;
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-dp-cell-range-end {
+  border-radius: 0 50% 50% 0;
+  background: var(--sg-color-primary-bg);
+}
+
+/* ── Month grid ── */
+
+.sg-dp-month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sg-padding-xs);
+  padding: var(--sg-padding-xs) 0;
+}
+
+.sg-dp-month-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: var(--sg-border-radius);
+  cursor: pointer;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-dp-month-cell:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dp-month-cell-selected {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-dp-month-cell-current {
+  border: 1px solid var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+
+/* ── Year grid ── */
+
+.sg-dp-year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sg-padding-xs);
+  padding: var(--sg-padding-xs) 0;
+}
+
+.sg-dp-year-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: var(--sg-border-radius);
+  cursor: pointer;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-dp-year-cell:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dp-year-cell-selected {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-dp-year-cell-current {
+  border: 1px solid var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+
+.sg-dp-year-cell-outside {
+  color: var(--sg-color-text-disabled);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Time panel (inside DatePicker with showTime)
+   ═══════════════════════════════════════════════════════ */
+
+.sg-dp-time-panel {
+  display: flex;
+  border-top: 1px solid var(--sg-color-border-secondary);
+  max-height: 168px;
+  min-width: 0;
+  width: 100%;
+}
+
+.sg-dp-time-col {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--sg-color-border-secondary);
+  max-height: 168px;
+  scrollbar-width: thin;
+}
+
+.sg-dp-time-col:last-child {
+  border-right: none;
+}
+
+.sg-dp-time-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-dp-time-cell:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dp-time-cell-active {
+  background: var(--sg-color-primary-bg);
+  color: var(--sg-color-primary);
+  font-weight: 600;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Footer
+   ═══════════════════════════════════════════════════════ */
+
+.sg-dp-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sg-padding-xs) var(--sg-padding-sm);
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  border-top: 1px solid var(--sg-color-border-secondary);
+  min-height: 36px;
+}
+
+.sg-dp-footer-start {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  margin-right: auto;
+}
+
+.sg-dp-footer-end {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+}
+
+.sg-dp-footer-btn {
+  padding: 2px var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius-sm);
+  background: var(--sg-color-bg-container);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  cursor: pointer;
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-dp-footer-btn:hover {
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+
+.sg-dp-ok-btn {
+  background: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-dp-ok-btn:hover {
+  background: var(--sg-color-primary-hover);
+  border-color: var(--sg-color-primary-hover);
+  color: var(--sg-color-white);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Range picker — dual panels
+   ═══════════════════════════════════════════════════════ */
+
+.sg-dp-range-panels {
+  display: flex;
+}
+
+.sg-dp-range-panels .sg-dp-panel + .sg-dp-panel {
+  border-left: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-dp-range-time {
+  display: flex;
+  border-top: 1px solid var(--sg-color-border-secondary);
+  min-width: 0;
+  width: 100%;
+}
+
+.sg-dp-range-time .sg-dp-time-panel {
+  flex: 1 1 0;
+  min-width: 0;
+  border-top: none;
+}
+
+.sg-dp-range-time .sg-dp-time-panel + .sg-dp-time-panel {
+  border-left: 1px solid var(--sg-color-border-secondary);
+}