@dodlhuat/basix 1.0.0

package/css/carousel.scss

@@ -0,0 +1,87 @@
+@use "properties";
+@use "parameters" as *;
+
+.carousel {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: $shadow;
+}
+
+.carousel-track-container {
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.4s ease-in-out;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  box-sizing: border-box;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  user-select: none;
+}
+
+.carousel-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: background 0.3s;
+  padding: 10px;
+}
+
+.carousel-button:hover {
+  background: var(--secondary-background);
+}
+
+.carousel-button--left {
+  left: 10px;
+}
+
+.carousel-button--right {
+  right: 10px;
+}
+
+.carousel-nav {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  z-index: 10;
+}
+
+.carousel-indicator {
+  padding: 0;
+  border: none;
+  width: 20px;
+  height: 5px;
+  background: var(--disabled);
+  margin: 0 5px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.carousel-indicator.current-slide {
+  background: var(--accent-color);
+}

package/css/chart.css

@@ -0,0 +1,159 @@
+:root {
+  --chart-bg: #ffffff;
+  --zone-left-bg: #e0f7fa;
+  --zone-mid-bg: #fff9c4;
+  --zone-right-bg: #d0f7db;
+  --grid-line-color: #bdbdbd;
+  --row-hover-bg: #f5f5f5;
+  --line-color: #1976d2;
+  --point-color: #d32f2f;
+  --text-color: #333;
+  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#chart-container {
+  position: relative;
+}
+
+/* Background Zones Layer */
+.chart-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.zone {
+  height: 100%;
+  border-right: 1px dashed rgba(0, 0, 0, 0.05);
+  /* Optional zone separator */
+}
+
+.zone-left {
+  background-color: var(--zone-left-bg);
+}
+
+.zone-mid {
+  background-color: var(--zone-mid-bg);
+}
+
+.zone-right {
+  background-color: var(--zone-right-bg);
+}
+
+/* Grid Lines Layer */
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--grid-line-color);
+}
+
+.grid-label {
+  position: absolute;
+  top: 10px;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: #666;
+}
+
+/* Content Layer */
+.chart-content {
+  position: relative;
+  z-index: 2;
+}
+
+.chart-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: background-color 0.2s;
+  height: 40px;
+  /* Fixed height for easier calculation */
+  box-sizing: border-box;
+}
+
+.chart-row:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.row-info {
+  width: 350px;
+  /* Fixed width for info column */
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-color);
+  z-index: 3;
+  /* Above lines */
+}
+
+.row-name {
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.row-meta {
+  font-size: 10px;
+  color: #777;
+}
+
+/* SVG Layer for Line */
+.chart-svg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  /* Nuclear option for visibility */
+  pointer-events: none;
+  overflow: visible;
+  /* Allow points to extend beyond container if needed */
+}
+
+.chart-polyline {
+  fill: none;
+  stroke: var(--line-color);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.chart-point {
+  fill: var(--point-color);
+  stroke: white;
+  stroke-width: 2;
+}
+
+/* Tooltip Styles */
+.chart-tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10000;
+  /* Ensure it's on top of everything */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+/*# sourceMappingURL=chart.css.map */

package/css/chart.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["chart.scss","chart.css"],"names":[],"mappings":"AAAA;EACE,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,wBAAA;EACA,0BAAA;EACA,uBAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,8DAAA;ACCF;;ADEA;EACE,kBAAA;ACCF;;ADEA,2BAAA;AACA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA;EACA,oBAAA;ACCF;;ADEA;EACE,YAAA;EACA,4CAAA;EACA,4BAAA;ACCF;;ADEA;EACE,qCAAA;ACCF;;ADEA;EACE,oCAAA;ACCF;;ADEA;EACE,sCAAA;ACCF;;ADEA,qBAAA;AACA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,oBAAA;ACCF;;ADEA;EACE,kBAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,wCAAA;ACCF;;ADEA;EACE,kBAAA;EACA,SAAA;EACA,2BAAA;EACA,eAAA;EACA,WAAA;ACCF;;ADEA,kBAAA;AACA;EACE,kBAAA;EACA,UAAA;ACCF;;ADEA;EACE,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,4CAAA;EACA,iCAAA;EACA,YAAA;EACA,wCAAA;EACA,sBAAA;ACCF;;ADEA;EACE,0CAAA;ACCF;;ADEA;EACE,YAAA;EACA,gCAAA;EACA,cAAA;EACA,eAAA;EACA,wBAAA;EACA,UAAA;EACA,gBAAA;ACCF;;ADEA;EACE,iBAAA;EACA,eAAA;ACCF;;ADEA;EACE,eAAA;EACA,WAAA;ACCF;;ADEA,uBAAA;AACA;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,kCAAA;EACA,oBAAA;EACA,iBAAA;EACA,sDAAA;ACCF;;ADEA;EACE,UAAA;EACA,yBAAA;EACA,eAAA;EACA,sBAAA;EACA,qBAAA;ACCF;;ADEA;EACE,wBAAA;EACA,aAAA;EACA,eAAA;ACCF;;ADEA,mBAAA;AACA;EACE,kBAAA;EACA,oCAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,oBAAA;EACA,cAAA;EACA,qCAAA;EACA,wCAAA;EACA,mBAAA;ACCF","file":"chart.css"}

package/css/chart.scss

@@ -0,0 +1,159 @@
+:root {
+  --chart-bg: #ffffff;
+  --zone-left-bg: #e0f7fa;
+  --zone-mid-bg: #fff9c4;
+  --zone-right-bg: #d0f7db;
+  --grid-line-color: #bdbdbd;
+  --row-hover-bg: #f5f5f5;
+  --line-color: #1976d2;
+  --point-color: #d32f2f;
+  --text-color: #333;
+  --font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#chart-container {
+  position: relative;
+}
+
+/* Background Zones Layer */
+.chart-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.zone {
+  height: 100%;
+  border-right: 1px dashed rgba(0, 0, 0, 0.05);
+  /* Optional zone separator */
+}
+
+.zone-left {
+  background-color: var(--zone-left-bg);
+}
+
+.zone-mid {
+  background-color: var(--zone-mid-bg);
+}
+
+.zone-right {
+  background-color: var(--zone-right-bg);
+}
+
+/* Grid Lines Layer */
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--grid-line-color);
+}
+
+.grid-label {
+  position: absolute;
+  top: 10px;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: #666;
+}
+
+/* Content Layer */
+.chart-content {
+  position: relative;
+  z-index: 2;
+}
+
+.chart-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: background-color 0.2s;
+  height: 40px;
+  /* Fixed height for easier calculation */
+  box-sizing: border-box;
+}
+
+.chart-row:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.row-info {
+  width: 350px;
+  /* Fixed width for info column */
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-color);
+  z-index: 3;
+  /* Above lines */
+}
+
+.row-name {
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.row-meta {
+  font-size: 10px;
+  color: #777;
+}
+
+/* SVG Layer for Line */
+.chart-svg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  /* Nuclear option for visibility */
+  pointer-events: none;
+  overflow: visible;
+  /* Allow points to extend beyond container if needed */
+}
+
+.chart-polyline {
+  fill: none;
+  stroke: var(--line-color);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.chart-point {
+  fill: var(--point-color);
+  stroke: white;
+  stroke-width: 2;
+}
+
+/* Tooltip Styles */
+.chart-tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10000;
+  /* Ensure it's on top of everything */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+/*# sourceMappingURL=chart.css.map */

package/css/chat-bubbles.css

@@ -0,0 +1,97 @@
+: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;
+}
+
+.chat-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 10px;
+}
+
+.message {
+  max-width: 75%;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  position: relative;
+  line-height: 1.2rem;
+  color: var(--primary-text);
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  word-wrap: break-word;
+}
+
+/* Metadata (time) */
+.message-meta {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--primary-text);
+  text-align: right;
+  margin-top: 4px;
+}
+
+/* Incoming Message */
+.message-incoming {
+  align-self: flex-start;
+  background-color: var(--background);
+  border-top-left-radius: 0;
+}
+
+.message-incoming::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -8px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top-color: var(--secondary-background);
+  border-right: 0;
+  margin-top: 0px;
+}
+
+.message-outgoing {
+  align-self: flex-end;
+  background-color: var(--accent-color-lighten);
+  border-top-right-radius: 0;
+}
+
+.message-outgoing::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -8px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top-color: var(--accent-color-lighten);
+  border-left: 0;
+}/*# sourceMappingURL=chat-bubbles.css.map */

package/css/chat-bubbles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","chat-bubbles.css","chat-bubbles.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,WAAA;EACA,aAAA;EACA,sBAAA;EACA,aCPQ;EDQR,SAAA;AD8BF;;AC3BA;EACE,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,4CCfO;EDgBP,qBAAA;AD8BF;;AC3BA,oBAAA;AACA;EACE,cAAA;EACA,iBAAA;EACA,0BAAA;EACA,iBAAA;EACA,eAAA;AD8BF;;AC3BA,qBAAA;AACA;EACE,sBAAA;EACA,mCAAA;EACA,yBAAA;AD8BF;;AC3BA;EACE,WAAA;EACA,kBAAA;EACA,MAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,6BAAA;EACA,6CAAA;EACA,eAAA;EACA,eAAA;AD8BF;;AC3BA;EACE,oBAAA;EACA,6CAAA;EACA,0BAAA;AD8BF;;AC3BA;EACE,WAAA;EACA,kBAAA;EACA,MAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,6BAAA;EACA,6CAAA;EACA,cAAA;AD8BF","file":"chat-bubbles.css"}

package/css/chat-bubbles.scss

@@ -0,0 +1,68 @@
+@use "properties";
+@use "parameters" as *;
+
+.chat-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: $spacing;
+  gap: 10px;
+}
+
+.message {
+  max-width: 75%;
+  padding: $spacing calc($spacing * 1.5);
+  border-radius: 8px;
+  position: relative;
+  line-height: calc($spacing * 1.2);
+  color: var(--primary-text);
+  box-shadow: $shadow;
+  word-wrap: break-word;
+}
+
+/* Metadata (time) */
+.message-meta {
+  display: block;
+  font-size: calc($spacing * 0.8);
+  color: var(--primary-text);
+  text-align: right;
+  margin-top: 4px;
+}
+
+/* Incoming Message */
+.message-incoming {
+  align-self: flex-start;
+  background-color: var(--background);
+  border-top-left-radius: 0;
+}
+
+.message-incoming::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -8px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top-color: var(--secondary-background);
+  border-right: 0;
+  margin-top: -0px;
+}
+
+.message-outgoing {
+  align-self: flex-end;
+  background-color: var(--accent-color-lighten);
+  border-top-right-radius: 0;
+}
+
+.message-outgoing::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -8px;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top-color: var(--accent-color-lighten);
+  border-left: 0;
+}

package/css/checkbox.css

@@ -0,0 +1,77 @@
+: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;
+}
+
+.styled-checkbox {
+  position: absolute;
+  opacity: 0;
+  width: auto;
+}
+.styled-checkbox + label {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+.styled-checkbox + label:before {
+  content: "";
+  margin-right: 10px;
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  transition: border 0.3s;
+  border: 2px solid rgba(0, 0, 0, 0.25);
+  margin-top: 2px;
+}
+.styled-checkbox:hover + label:before {
+  border-color: rgba(0, 0, 0, 0.5);
+}
+.styled-checkbox:checked + label:before {
+  background: var(--accent-color);
+}
+.styled-checkbox:disabled + label {
+  color: var(--disabled);
+  cursor: auto;
+}
+.styled-checkbox:disabled + label:before {
+  box-shadow: none;
+  background: var(--disabled);
+}
+.styled-checkbox:checked + label:after {
+  content: url("../icons/checkmark-outline.svg");
+  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(180deg) brightness(101%) contrast(101%);
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 1rem;
+  height: 1rem;
+}/*# sourceMappingURL=checkbox.css.map */

package/css/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","checkbox.css","checkbox.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,kBAAA;EACA,UAAA;EACA,WAAA;AD8BF;AC5BE;EACE,kBAAA;EACA,eAAA;EACA,UAAA;EACA,aAAA;EACA,qBAAA;AD8BJ;AC3BE;EACE,WAAA;EACA,kBAAA;EACA,qBAAA;EACA,WCpBM;EDqBN,YCrBM;EDsBN,uBAAA;EACA,qCAAA;EACA,eAAA;AD6BJ;AC1BE;EACE,gCAAA;AD4BJ;ACzBE;EACE,+BAAA;AD2BJ;ACxBE;EACE,sBAAA;EACA,YAAA;AD0BJ;ACvBE;EACE,gBAAA;EACA,2BAAA;ADyBJ;ACtBE;EACE,8CAAA;EACA,gGAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;EACA,WCnDM;EDoDN,YCpDM;AF4EV","file":"checkbox.css"}

package/css/checkbox.scss

@@ -0,0 +1,55 @@
+@use "properties";
+@use "parameters" as *;
+
+.styled-checkbox {
+  position: absolute;
+  opacity: 0;
+  width: auto;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    margin-bottom: calc($spacing / 2);
+  }
+
+  & + label::before {
+    content: '';
+    margin-right: 10px;
+    display: inline-block;
+    width: $spacing;
+    height: $spacing;
+    transition: border 0.3s;
+    border: 2px solid rgba(0, 0, 0, 0.25);
+    margin-top: 2px;
+  }
+
+  &:hover + label::before {
+    border-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &:checked + label::before {
+    background: var(--accent-color);
+  }
+
+  &:disabled + label {
+    color: var(--disabled);
+    cursor: auto;
+  }
+
+  &:disabled + label::before {
+    box-shadow: none;
+    background: var(--disabled);
+  }
+
+  &:checked + label::after {
+    content: url("../icons/checkmark-outline.svg");
+    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(180deg) brightness(101%) contrast(101%);
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: $spacing;
+    height: $spacing;
+  }
+}