@jupytergis/base 0.10.1 → 0.12.0

package/style/shared/command.css

@@ -0,0 +1,178 @@
+/* Command Root */
+.jgis-command {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+}
+
+/* Command Dialog specific styles */
+.jgis-command [cmdk-group-heading] {
+  color: var(--jp-ui-font-color2);
+  padding: 0 0.5rem;
+  font-weight: 500;
+}
+
+.jgis-command [data-slot='command-input-wrapper'] {
+  height: 3rem;
+}
+
+.jgis-command [cmdk-group] {
+  padding: 0 0.5rem;
+}
+
+.jgis-command [cmdk-group]:not([hidden]) ~ [cmdk-group] {
+  padding-top: 0;
+}
+
+.jgis-command [cmdk-input-wrapper] svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.jgis-command [cmdk-input] {
+  height: 1.5rem;
+  box-sizing: border-box;
+  padding: 1rem 0.5rem;
+}
+
+.jgis-command [cmdk-item] {
+  padding: 0 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.jgis-command [cmdk-item] svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+/* Command Input Wrapper */
+.jgis-command-input-wrapper {
+  display: flex;
+  height: 2.25rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--jp-border-color0);
+  padding: 0.25rem 0.75rem;
+}
+
+.jgis-command-input-wrapper .size-4 {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* Command Input */
+.jgis-command-input {
+  display: flex;
+  height: 1rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.jgis-command-input::placeholder {
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-command-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Command List */
+.jgis-command-list {
+  max-height: 300px;
+  scroll-padding: 0.25rem 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Command Empty */
+.jgis-command-empty {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Command Group */
+.jgis-command-group {
+  color: var(--jp-ui-font-color0);
+  overflow: hidden;
+  padding: 0.25rem;
+}
+
+.jgis-command-group [cmdk-group-heading] {
+  color: var(--jp-ui-font-color2);
+  padding: 0 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Command Separator */
+.jgis-command-separator {
+  background-color: var(--jp-border-color0);
+  margin: 0 -0.25rem;
+  height: 1px;
+}
+
+/* Command Item */
+.jgis-command-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.125rem;
+  padding: 0 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.jgis-command-item[data-selected='true'] {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-command-item svg:not([class*='text-']) {
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-command-item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.jgis-command-item svg:not([class*='size-']) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-command-item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Command Shortcut */
+.jgis-command-shortcut {
+  color: var(--jp-ui-font-color2);
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+}

package/style/shared/dialog.css

@@ -0,0 +1,177 @@
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.jgis-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, black, transparent 50%);
+}
+
+.jgis-dialog-overlay[data-state='open'] {
+  animation: dialog-fade-in 0.2s ease-in-out;
+}
+
+.jgis-dialog-overlay[data-state='closed'] {
+  animation: dialog-fade-out 0.2s ease-in-out;
+}
+
+.jgis-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  transform: translate(-50%, -50%);
+  gap: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color0);
+  padding: 1.5rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition-duration: 200ms;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-content {
+    max-width: 32rem;
+  }
+}
+
+.jgis-dialog-content[data-state='open'] {
+  animation:
+    dialog-fade-in 0.2s ease-in-out,
+    dialog-zoom-in 0.2s ease-in-out;
+}
+
+.jgis-dialog-content[data-state='closed'] {
+  animation:
+    dialog-fade-out 0.2s ease-in-out,
+    dialog-zoom-out 0.2s ease-in-out;
+}
+
+.jgis-dialog-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 0.125rem;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out;
+  outline: none;
+}
+
+.jgis-dialog-close:hover {
+  opacity: 1;
+}
+
+.jgis-dialog-close:focus {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--jp-ui-font-color0);
+  outline: none;
+}
+
+.jgis-dialog-close:disabled {
+  pointer-events: none;
+}
+
+.jgis-dialog-close[data-state='open'] {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-dialog-close svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-header {
+    text-align: left;
+  }
+}
+
+.jgis-dialog-footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.jgis-dialog-title {
+  font-size: 1.125rem;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.jgis-dialog-description {
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/style/shared/input.css

@@ -0,0 +1,59 @@
+[data-slot='input'] {
+  box-sizing: border-box;
+  height: 1.125rem;
+  width: auto;
+  min-width: 0;
+  border-radius: var(--jp-border-radius, 0.375rem);
+  border: 1px solid var(--jp-border-color1);
+  background-color: transparent;
+  padding: 0.25rem 0.75rem;
+  font-size: 1rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition:
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  outline: none;
+  color: var(--jp-ui-font-color1);
+}
+
+[data-slot='input']::placeholder {
+  color: var(--jp-ui-font-color2);
+}
+
+[data-slot='input']::selection {
+  background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+[data-slot='input']:focus-visible {
+  border-color: var(--jp-brand-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-brand-color1-rgb), 0.1);
+}
+
+[data-slot='input'][aria-invalid='true'] {
+  border-color: var(--jp-error-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-error-color1-rgb), 0.2);
+}
+
+[data-slot='input']:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[data-slot='input']::file-selector-button {
+  color: var(--jp-ui-font-color1);
+  display: inline-flex;
+  height: 1.75rem;
+  border: 0;
+  background-color: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-right: 0.75rem;
+}
+
+@media (min-width: 768px) {
+  [data-slot='input'] {
+    font-size: 0.875rem;
+  }
+}

package/style/shared/pagination.css

@@ -73,7 +73,7 @@
 }
 
 .jgis-pagination-link[data-variant='outline'] {
-  border: 1px solid var(--jp-accent-color0);
+  border: 1px solid var(--jp-border-color0);
   background-color: var(--jp-layout-color2);
   transition:
     background-color 0.2s ease,

package/style/shared/popover.css

@@ -26,6 +26,7 @@
   box-shadow: 0 4px 6px
     color-mix(in srgb, var(--jp-ui-font-color0), transparent 90%);
   z-index: 50;
+  border: 1px solid var(--jp-border-color0);
 }
 
 .jgis-popover-content[data-state='open'] {

package/style/shared/radioGroup.css

@@ -0,0 +1,55 @@
+.jgis-radio-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.jgis-radio-group-item {
+  aspect-ratio: 1 / 1;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px !important;
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition:
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  outline: none;
+  cursor: pointer;
+}
+
+.jgis-radio-group-item:focus-visible {
+  border-color: var(--jp-ui-font-color0);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 50%);
+}
+
+.jgis-radio-group-item[aria-invalid='true'] {
+  border-color: var(--jp-error-color0, #dc2626);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-error-color0, #dc2626), transparent 80%);
+}
+
+.jgis-radio-group-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jgis-radio-group-indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jgis-radio-group-indicator-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: translate(-50%, -50%);
+  fill: currentColor;
+}

package/style/shared/switch.css

@@ -0,0 +1,63 @@
+.jgis-switch {
+  display: inline-flex;
+  height: 1.15rem;
+  width: 2rem;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 9999px !important;
+  border: 1px solid transparent;
+  /* border: 1px solid var(--jp-brand-color3); */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  cursor: pointer;
+}
+
+.jgis-switch:focus-visible {
+  border-color: var(--jp-border-color0);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 50%);
+}
+
+.jgis-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jgis-switch[data-state='checked'] {
+  background-color: var(--jp-accent-color0);
+}
+
+.jgis-switch[data-state='unchecked'] {
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-switch-thumb {
+  background-color: var(--jp-layout-color1);
+  pointer-events: none;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  box-shadow: none;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(0);
+}
+
+.jgis-switch-thumb[data-state='checked'] {
+  transform: translateX(calc(100% - 6px));
+}
+
+.jgis-switch-thumb[data-state='unchecked'] {
+  transform: translateX(-2px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .jgis-switch-thumb[data-state='unchecked'] {
+    background-color: var(--jp-ui-font-color0);
+  }
+
+  .jgis-switch-thumb[data-state='checked'] {
+    background-color: var(--jp-layout-color1);
+  }
+}

package/style/shared/tabs.css

@@ -1,7 +1,6 @@
 .jgis-panel-tabs {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
   justify-content: center;
   align-items: center;
   background-color: var(--jp-layout-color0);
@@ -20,7 +19,8 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  border-radius: 5px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   overflow-x: scroll;
 }
 
@@ -61,7 +61,8 @@
   outline: none;
   width: 100%;
   overflow-y: scroll;
-  max-height: 480px;
+  /* max-height: 480px; */
+  padding-top: 1rem;
 }
 
 .jgis-tabs-content:focus-visible {

package/style/shared/toggle.css

@@ -46,7 +46,7 @@
 }
 
 .jgis-toggle-outline {
-  border: 1px solid var(--jp-accent-color0);
+  border: 1px solid var(--jp-border-color0);
   background-color: transparent;
   transition:
     background-color 0.3s,