@dodlhuat/basix 1.0.0

package/css/tooltip.css

@@ -0,0 +1,151 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 10000;
+  background: var(--disabled);
+  color: var(--secondary-text);
+  border-radius: 0.4rem;
+  padding: 1rem 1.5rem;
+  max-width: 300px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+}
+
+.tooltip.visible {
+  opacity: 1;
+}
+
+.tooltip-content {
+  position: relative;
+}
+
+/* Arrow styles */
+.tooltip::before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0.5rem solid transparent;
+}
+
+.tooltip[data-position=top]::before {
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--disabled);
+  border-bottom: 0;
+}
+
+.tooltip[data-position=bottom]::before {
+  top: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--disabled);
+  border-top: 0;
+}
+
+.tooltip[data-position=left]::before {
+  right: -0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--disabled);
+  border-right: 0;
+}
+
+.tooltip[data-position=right]::before {
+  left: -0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--disabled);
+  border-left: 0;
+}
+
+.tooltip-content code {
+  padding: 2px 6px;
+  font-family: "Courier New", monospace;
+  font-size: 0.9em;
+}
+
+.tooltip.tooltip-info {
+  background: var(--accent-color);
+}
+
+.tooltip.tooltip-info::before {
+  border-top-color: var(--accent-color);
+  border-bottom-color: var(--accent-color);
+  border-left-color: var(--accent-color);
+  border-right-color: var(--accent-color);
+}
+
+.tooltip.tooltip-success {
+  background: var(--success);
+}
+
+.tooltip.tooltip-success::before {
+  border-top-color: var(--success);
+  border-bottom-color: var(--success);
+  border-left-color: var(--success);
+  border-right-color: var(--success);
+}
+
+.tooltip.tooltip-warning {
+  background: var(--warning);
+  color: var(--disabled);
+}
+
+.tooltip.tooltip-warning::before {
+  border-top-color: var(--warning);
+  border-bottom-color: var(--warning);
+  border-left-color: var(--warning);
+  border-right-color: var(--warning);
+}
+
+.tooltip.tooltip-error {
+  background: var(--error);
+}
+
+.tooltip.tooltip-error::before {
+  border-top-color: var(--error);
+  border-bottom-color: var(--error);
+  border-left-color: var(--error);
+  border-right-color: var(--error);
+}
+
+/* Large tooltip variant */
+.tooltip.tooltip-large {
+  max-width: 500px;
+  padding: 1rem 1.5rem;
+}/*# sourceMappingURL=tooltip.css.map */

package/css/tooltip.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","tooltip.css","tooltip.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,eAAA;EACA,cAAA;EACA,2BAAA;EACA,4BAAA;EACA,qBCPc;EDQd,oBAAA;EACA,gBAAA;EACA,UAAA;EACA,oBAAA;EACA,6BAAA;EACA,4CCXO;AFyCT;;AC3BA;EACE,UAAA;AD8BF;;AC3BA;EACE,kBAAA;AD8BF;;AC3BA,iBAAA;AACA;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AD8BF;;AC3BA;EACE,eAAA;EACA,SAAA;EACA,2BAAA;EACA,iCAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,YAAA;EACA,SAAA;EACA,2BAAA;EACA,oCAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,cAAA;EACA,QAAA;EACA,2BAAA;EACA,kCAAA;EACA,eAAA;AD8BF;;AC3BA;EACE,aAAA;EACA,QAAA;EACA,2BAAA;EACA,mCAAA;EACA,cAAA;AD8BF;;AC3BA;EACE,gBAAA;EACA,qCAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,+BAAA;AD8BF;;AC3BA;EACE,qCAAA;EACA,wCAAA;EACA,sCAAA;EACA,uCAAA;AD8BF;;AC3BA;EACE,0BAAA;AD8BF;;AC3BA;EACE,gCAAA;EACA,mCAAA;EACA,iCAAA;EACA,kCAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,sBAAA;AD8BF;;AC3BA;EACE,gCAAA;EACA,mCAAA;EACA,iCAAA;EACA,kCAAA;AD8BF;;AC3BA;EACE,wBAAA;AD8BF;;AC3BA;EACE,8BAAA;EACA,iCAAA;EACA,+BAAA;EACA,gCAAA;AD8BF;;AC3BA,0BAAA;AACA;EACE,gBAAA;EACA,oBAAA;AD8BF","file":"tooltip.css"}

package/css/tooltip.scss

@@ -0,0 +1,122 @@
+@use "properties";
+@use "parameters" as *;
+
+.tooltip {
+  position: fixed;
+  z-index: 10000;
+  background: var(--disabled);
+  color: var(--secondary-text);
+  border-radius: $border-radius;
+  padding: $spacing calc($spacing * 1.5);
+  max-width: 300px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  box-shadow: $shadow;
+}
+
+.tooltip.visible {
+  opacity: 1;
+}
+
+.tooltip-content {
+  position: relative;
+}
+
+/* Arrow styles */
+.tooltip::before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: calc($spacing * 0.5) solid transparent;
+}
+
+.tooltip[data-position="top"]::before {
+  bottom: calc(($spacing / 2) * -1);
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--disabled);
+  border-bottom: 0;
+}
+
+.tooltip[data-position="bottom"]::before {
+  top: calc(($spacing / 2) * -1);
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--disabled);
+  border-top: 0;
+}
+
+.tooltip[data-position="left"]::before {
+  right: calc(($spacing / 2) * -1);
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--disabled);
+  border-right: 0;
+}
+
+.tooltip[data-position="right"]::before {
+  left: calc(($spacing / 2) * -1);
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--disabled);
+  border-left: 0;
+}
+
+.tooltip-content code {
+  padding: 2px 6px;
+  font-family: "Courier New", monospace;
+  font-size: 0.9em;
+}
+
+.tooltip.tooltip-info {
+  background: var(--accent-color);
+}
+
+.tooltip.tooltip-info::before {
+  border-top-color: var(--accent-color);
+  border-bottom-color: var(--accent-color);
+  border-left-color: var(--accent-color);
+  border-right-color: var(--accent-color);
+}
+
+.tooltip.tooltip-success {
+  background: var(--success);
+}
+
+.tooltip.tooltip-success::before {
+  border-top-color: var(--success);
+  border-bottom-color: var(--success);
+  border-left-color: var(--success);
+  border-right-color: var(--success);
+}
+
+.tooltip.tooltip-warning {
+  background: var(--warning);
+  color: var(--disabled);
+}
+
+.tooltip.tooltip-warning::before {
+  border-top-color: var(--warning);
+  border-bottom-color: var(--warning);
+  border-left-color: var(--warning);
+  border-right-color: var(--warning);
+}
+
+.tooltip.tooltip-error {
+  background: var(--error);
+}
+
+.tooltip.tooltip-error::before {
+  border-top-color: var(--error);
+  border-bottom-color: var(--error);
+  border-left-color: var(--error);
+  border-right-color: var(--error);
+}
+
+/* Large tooltip variant */
+.tooltip.tooltip-large {
+  max-width: 500px;
+  padding: $spacing calc($spacing * 1.5);
+}

package/css/tree.css

@@ -0,0 +1,199 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+ul.tree {
+  list-style: none;
+}
+ul.tree li {
+  list-style: none;
+}
+
+.tree-node {
+  position: relative;
+  margin: 4px 0;
+}
+
+.tree-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  padding: 14px 16px;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  -webkit-tap-highlight-color: transparent;
+}
+.tree-item::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent-color-lighten);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.tree-item:hover::before {
+  opacity: 1;
+}
+.tree-item.selected {
+  background: var(--accent-color);
+}
+.tree-item.expanded > .tree-icon svg.chevron {
+  transform: rotate(90deg);
+}
+.tree-item.file .tree-label {
+  color: var(--secondary-text);
+  font-weight: 400;
+}
+.tree-item.file.selected .tree-label {
+  color: var(--accent-color-text);
+}
+.tree-item.folder > .tree-icon svg {
+  fill: none;
+}
+
+.tree-icon {
+  position: relative;
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.tree-icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: var(--primary-text);
+  stroke-width: 2;
+  fill: none;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tree-label {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.3px;
+  color: var(--primary-text);
+}
+
+.tree-children {
+  list-style: none;
+  margin-left: 24px;
+  padding-left: 16px;
+  border-left: 2px solid var(--primary-text);
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.tree-children.expanded {
+  max-height: 2000px;
+  opacity: 1;
+  margin: 8px 0;
+}
+.tree-children .tree-node {
+  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+.tree-children .tree-node:nth-child(1) {
+  animation-delay: 0.05s;
+}
+.tree-children .tree-node:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.tree-children .tree-node:nth-child(3) {
+  animation-delay: 0.15s;
+}
+.tree-children .tree-node:nth-child(4) {
+  animation-delay: 0.2s;
+}
+.tree-children .tree-node:nth-child(5) {
+  animation-delay: 0.25s;
+}
+
+@media (max-width: 768px) {
+  .tree-item {
+    min-height: 56px;
+    padding: 16px;
+  }
+  .tree-icon {
+    width: 28px;
+    height: 28px;
+  }
+  .tree-label {
+    font-size: 16px;
+  }
+  .tree-children {
+    margin-left: 20px;
+    padding-left: 12px;
+  }
+}
+@media (max-width: 480px) {
+  .tree-item {
+    min-height: 60px;
+    padding: 18px 14px;
+  }
+  .tree-label {
+    font-size: 15px;
+  }
+}/*# sourceMappingURL=tree.css.map */

package/css/tree.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","tree.css","tree.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE;IACE,UAAA;IACA,2BAAA;ED8BF;EC3BA;IACE,UAAA;IACA,wBAAA;ED6BF;AACF;AC1BA;EACE;IACE,UAAA;IACA,4BAAA;ED4BF;ECzBA;IACE,UAAA;IACA,wBAAA;ED2BF;AACF;ACxBA;EACE,gBAAA;AD0BF;ACxBE;EACE,gBAAA;AD0BJ;;ACtBA;EACE,kBAAA;EACA,aAAA;ADyBF;;ACtBA;EACE,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;EAEA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,gBAAA;EAEA,6BAAA;EACA,mBAAA;EAEA,kDAAA;EACA,wCAAA;ADsBF;ACpBE;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,uCAAA;EACA,UAAA;EACA,6BAAA;ADsBJ;ACnBE;EACE,UAAA;ADqBJ;AClBE;EACE,+BAAA;ADoBJ;ACjBE;EACE,wBAAA;ADmBJ;ACfI;EACE,4BAAA;EACA,gBAAA;ADiBN;ACdI;EACE,+BAAA;ADgBN;ACZE;EACE,UAAA;ADcJ;;ACVA;EACE,kBAAA;EACA,UAAA;EAEA,WAAA;EACA,YAAA;EACA,kBAAA;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;ADWF;ACTE;EACE,WAAA;EACA,YAAA;EAEA,2BAAA;EACA,eAAA;EACA,UAAA;EAEA,wDAAA;ADSJ;;ACLA;EACE,kBAAA;EACA,UAAA;EACA,OAAA;EAEA,wCAAA;EACA,eAAA;EACA,gBAAA;EACA,sBAAA;EACA,0BAAA;ADOF;;ACJA;EACE,gBAAA;EAEA,iBAAA;EACA,kBAAA;EACA,0CAAA;EAEA,aAAA;EACA,gBAAA;EACA,UAAA;EAEA,kDAAA;ADIF;ACFE;EACE,kBAAA;EACA,UAAA;EACA,aAAA;ADIJ;ACDE;EACE,+DAAA;ADGJ;ACAM;EACE,sBAAA;ADER;ACHM;EACE,qBAAA;ADKR;ACNM;EACE,sBAAA;ADQR;ACTM;EACE,qBAAA;ADWR;ACZM;EACE,sBAAA;ADcR;;ACRA;EACE;IACE,gBAAA;IACA,aAAA;EDWF;ECRA;IACE,WAAA;IACA,YAAA;EDUF;ECPA;IACE,eAAA;EDSF;ECNA;IACE,iBAAA;IACA,kBAAA;EDQF;AACF;ACLA;EACE;IACE,gBAAA;IACA,kBAAA;EDOF;ECJA;IACE,eAAA;EDMF;AACF","file":"tree.css"}

package/css/tree.scss

@@ -0,0 +1,192 @@
+@use "properties";
+@use "parameters" as *;
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+ul.tree {
+  list-style: none;
+
+  li {
+    list-style: none;
+  }
+}
+
+.tree-node {
+  position: relative;
+  margin: 4px 0;
+}
+
+.tree-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  padding: 14px 16px;
+
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+
+  border: 1px solid transparent;
+  border-radius: 10px;
+
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  -webkit-tap-highlight-color: transparent;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--accent-color-lighten);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+
+  &.selected {
+    background: var(--accent-color);
+  }
+
+  &.expanded > .tree-icon svg.chevron {
+    transform: rotate(90deg);
+  }
+
+  &.file {
+    .tree-label {
+      color: var(--secondary-text);
+      font-weight: 400;
+    }
+
+    &.selected .tree-label {
+      color: var(--accent-color-text);
+    }
+  }
+
+  &.folder > .tree-icon svg {
+    fill: none;
+  }
+}
+
+.tree-icon {
+  position: relative;
+  z-index: 1;
+
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    stroke: var(--primary-text);
+    stroke-width: 2;
+    fill: none;
+
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+.tree-label {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+
+  font-family: "JetBrains Mono", monospace;
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: -0.3px;
+  color: var(--primary-text);
+}
+
+.tree-children {
+  list-style: none;
+
+  margin-left: 24px;
+  padding-left: 16px;
+  border-left: 2px solid var(--primary-text);
+
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.expanded {
+    max-height: 2000px;
+    opacity: 1;
+    margin: 8px 0;
+  }
+
+  .tree-node {
+    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+
+    @for $i from 1 through 5 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 0.05s;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .tree-item {
+    min-height: 56px;
+    padding: 16px;
+  }
+
+  .tree-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .tree-label {
+    font-size: 16px;
+  }
+
+  .tree-children {
+    margin-left: 20px;
+    padding-left: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .tree-item {
+    min-height: 60px;
+    padding: 18px 14px;
+  }
+
+  .tree-label {
+    font-size: 15px;
+  }
+}