@dodlhuat/basix 1.0.0

package/css/datepicker.scss

@@ -0,0 +1,317 @@
+@use "parameters" as *;
+@use "properties";
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.datepicker {
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  width: 320px;
+  padding: 1rem;
+  user-select: none;
+  box-shadow: $shadow;
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+.datepicker.visible {
+  display: block;
+}
+
+.datepicker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.datepicker-nav {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: $border-radius;
+  color: var(--primary-text);
+  transition: background-color 0.2s;
+}
+
+.datepicker-nav:hover {
+  background-color: var(--accent-color-lighten);
+  color: var(--accent-color-text);
+}
+
+.datepicker-title {
+  display: flex;
+  gap: calc($spacing / 2);
+  font-weight: 600;
+}
+
+.datepicker-select {
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: calc($spacing / 4);
+  border-radius: calc($spacing / 4);
+}
+
+.datepicker-select:hover {
+  background-color: var(--accent-color-lighten);
+}
+
+.datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: calc($spacing / 4);
+  text-align: center;
+}
+
+.datepicker-day-header {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 500;
+  padding: calc($spacing / 2) 0;
+}
+
+.datepicker-day {
+  padding: calc($spacing / 2) 0;
+  font-size: $spacing;
+  cursor: pointer;
+  border-radius: $border-radius;
+  transition: all 0.2s;
+}
+
+.datepicker-day:hover:not(.disabled) {
+  background-color: var(--accent-color-lighten);
+}
+
+.datepicker-day.other-month {
+  color: var(--disabled);
+}
+
+.datepicker-day.selected {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+}
+
+.datepicker-day.in-range {
+  background-color: var(--accent-color-lighten);
+  color: var(--accent-color-text);
+  border-radius: 0;
+}
+
+.datepicker-day.range-start {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
+
+.datepicker-day.range-end {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}
+
+.datepicker-day.today {
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.datepicker-day.selected.today {
+  color: var(--accent-color-text);
+}
+
+.datepicker-grid-months,
+.datepicker-grid-years {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  text-align: center;
+  padding: 0.5rem 0;
+}
+
+.datepicker-month,
+.datepicker-year {
+  padding: 0.75rem 0.25rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  border-radius: $border-radius;
+  transition: all 0.2s;
+}
+
+.datepicker-month:hover,
+.datepicker-year:hover {
+  background-color: var(--accent-color-lighten);
+}
+
+.datepicker-month.selected,
+.datepicker-year.selected {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+}
+
+.datepicker-month.current,
+.datepicker-year.current {
+  font-weight: bold;
+  color: var(--accent-color);
+}
+
+.datepicker-month.selected.current,
+.datepicker-year.selected.current {
+  color: var(--accent-color-text);
+}
+
+.datepicker-title-btn {
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: $spacing;
+  cursor: pointer;
+  padding: calc($spacing / 4) calc($spacing / 2);
+  border-radius: $border-radius;
+  color: var(--primary-text);
+  transition: background-color 0.2s;
+}
+
+.datepicker-title-btn:hover {
+  background-color: var(--accent-color-lighten);
+}
+
+/* Time Picker */
+.datepicker-time {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--divider);
+  margin-top: $spacing;
+  padding-top: $spacing;
+}
+
+.datepicker-time-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-text);
+}
+
+.datepicker-time-controls {
+  display: flex;
+  align-items: center;
+  gap: calc($spacing / 4);
+}
+
+.datepicker-time-separator {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  padding: 0 calc($spacing / 8);
+}
+
+.datepicker-time-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc($spacing / 8);
+}
+
+.datepicker-time-btn {
+  background: none;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  cursor: pointer;
+  padding: calc($spacing / 8) calc($spacing / 2);
+  font-size: 0.6rem;
+  line-height: 1;
+  color: var(--primary-text);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--accent-color-lighten);
+    color: var(--accent-color-text);
+  }
+}
+
+.datepicker-time-display {
+  width: 2.5rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 600;
+  font-family: inherit;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  padding: calc($spacing / 4) 0;
+  background: var(--background);
+  color: var(--primary-text);
+  -moz-appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -1px;
+  }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 640px) {
+  .datepicker-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: none;
+  }
+
+  .datepicker-backdrop.visible {
+    display: block;
+  }
+
+  .datepicker.mobile {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-width: 100%;
+    border-radius: $border-radius $border-radius 0 0;
+    box-shadow: $shadow;
+    animation: slideUp 0.3s ease-out;
+    transform: none !important;
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  .datepicker {
+    width: 100%;
+    max-width: 320px;
+  }
+
+  .datepicker-day {
+    padding: calc($spacing * 0.75) 0;
+  }
+}

package/css/defaults.css

@@ -0,0 +1,118 @@
+: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;
+}
+
+html, body {
+  overflow: auto;
+}
+
+body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  cursor: pointer;
+}
+
+.content {
+  margin-left: 2rem;
+  margin-right: 2rem;
+  margin-top: 4rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.block {
+  display: block;
+  width: 100%;
+}
+
+.vertical-align-center {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align-center {
+  text-align: center;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+code.code {
+  background: var(--divider);
+  display: block;
+  font-family: monospace;
+  border-radius: 0.4rem;
+  font-size: 1.3rem;
+  margin: 1rem 0;
+}
+code.code .code-header {
+  display: block;
+  background: var(--disabled);
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  padding: 0.5rem 2rem;
+  color: var(--primary-text);
+  font-weight: bold;
+}
+code.code .code-content {
+  padding: 2rem;
+  white-space: break-spaces;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.spacing-right {
+  margin-right: 1rem;
+}
+
+.flex {
+  display: flex;
+}/*# sourceMappingURL=defaults.css.map */

package/css/defaults.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","defaults.css","defaults.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,cAAA;AD8BF;;AC3BA;EACE,kBAAA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;AD8BF;;AC3BA;EACE,eAAA;AD8BF;;AC3BA;EACE,iBAAA;EACA,kBAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,aAAA;AD8BF;;AC3BA;EACE,YAAA;AD8BF;;AC3BA;EACE,WAAA;AD8BF;;AC3BA;EACE,cAAA;EACA,WAAA;AD8BF;;AC3BA;EACE,mBAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,kBAAA;AD8BF;;AC3BA;EACE,mBAAA;EACA,uBAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,cAAA;EACA,sBAAA;EACA,qBC3Dc;ED4Dd,iBAAA;EACA,cAAA;AD8BF;AC5BE;EACE,cAAA;EACA,2BAAA;EACA,8BClEY;EDmEZ,+BCnEY;EDoEZ,oBAAA;EACA,0BAAA;EACA,iBAAA;AD8BJ;AC3BE;EACE,aAAA;EACA,yBAAA;AD6BJ;;ACzBA;EACE,eAAA;AD4BF;;ACzBA;EACE,kBCrFQ;AFiHV;;ACzBA;EACE,aAAA;AD4BF","file":"defaults.css"}

package/css/defaults.scss

@@ -0,0 +1,91 @@
+@use "properties";
+@use "parameters" as *;
+
+html, body {
+  overflow: auto;
+}
+
+body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+}
+
+a {
+  cursor: pointer;
+}
+
+.content {
+  margin-left: calc(2 * $spacing);
+  margin-right: calc(2 * $spacing);
+  margin-top: calc($spacing * 4);
+}
+
+.hidden {
+  display: none;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.block {
+  display: block;
+  width: 100%;
+}
+
+.vertical-align-center {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align-center {
+  text-align: center;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+code.code {
+  background: var(--divider);
+  display: block;
+  font-family: monospace;
+  border-radius: $border-radius;
+  font-size: calc($spacing * 1.3);
+  margin: $spacing 0;
+
+  .code-header {
+    display: block;
+    background: var(--disabled);
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    padding: calc($spacing / 2) calc($spacing * 2);
+    color: var(--primary-text);
+    font-weight: bold;
+  }
+
+  .code-content {
+    padding: calc($spacing * 2);
+    white-space: break-spaces;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.spacing-right {
+  margin-right: $spacing;
+}
+
+.flex {
+  display: flex;
+}

package/css/dropdown.css

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+: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;
+}
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-container.active > .dropdown-menu {
+  opacity: 1;
+  display: block;
+  transform: translateY(0);
+}
+.dropdown-container .dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  background: var(--background);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  min-width: 220px;
+  padding: 8px 0;
+  list-style: none;
+  opacity: 0;
+  display: none;
+  transform: translateY(-10px);
+  transition: opacity 0.2s, transform 0.2s;
+  z-index: 100;
+}
+.dropdown-container .dropdown-menu li {
+  position: relative;
+  list-style: none;
+}
+.dropdown-container .dropdown-menu li.open > .dropdown-item {
+  background-color: var(--background);
+  color: var(--accent-color);
+}
+.dropdown-container .dropdown-menu li.open > .dropdown-item.has-children::after {
+  transform: rotate(90deg);
+}
+.dropdown-container .dropdown-menu li.open > ul {
+  opacity: 1;
+  display: block;
+  transform: translateX(0);
+}
+.dropdown-container .dropdown-menu ul {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  margin-left: 4px;
+  background-color: var(--background);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  min-width: 220px;
+  padding: 8px 0;
+  list-style: none;
+  opacity: 0;
+  display: none;
+  transform: translateX(-10px);
+  transition: opacity 0.2s, transform 0.2s;
+}
+.dropdown-container .dropdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  color: var(--primary-text);
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.dropdown-container .dropdown-item:hover {
+  background-color: var(--background);
+  color: var(--accent-color);
+}
+.dropdown-container .dropdown-item.has-children::after {
+  content: "›";
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 10px;
+  transition: transform 0.2s;
+}
+@media (max-width: 768px) {
+  .dropdown-container .dropdown-menu {
+    width: 100%;
+    min-width: 250px;
+  }
+  .dropdown-container .dropdown-menu ul {
+    position: static;
+    box-shadow: none;
+    background-color: transparent;
+    transform: none;
+    margin-left: 0;
+    padding-left: 15px;
+    border-left: 2px solid var(--secondary-text);
+    border-radius: 0;
+    opacity: 0;
+    display: none;
+    transition: none;
+  }
+  .dropdown-container .dropdown-menu li.open > ul {
+    display: block;
+    opacity: 1;
+    transform: none;
+  }
+  .dropdown-container .dropdown-item.has-children::after {
+    transform: rotate(90deg);
+  }
+  .dropdown-container .dropdown-menu li.open > .dropdown-item.has-children::after {
+    transform: rotate(-90deg);
+  }
+}/*# sourceMappingURL=dropdown.css.map */

package/css/dropdown.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dropdown.css","properties.scss","dropdown.scss","parameters.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;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;ADEF;;ACCA;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;ADEF;;AE5BA;EACE,kBAAA;EACA,qBAAA;AF+BF;AE5BI;EACE,UAAA;EACA,cAAA;EACA,wBAAA;AF8BN;AE1BE;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,6BAAA;EACA,kBAAA;EACA,4CCnBK;EDoBL,gBAAA;EACA,cAAA;EACA,gBAAA;EACA,UAAA;EACA,aAAA;EACA,4BAAA;EACA,wCACE;EAEF,YAAA;AF0BJ;AExBI;EACE,kBAAA;EACA,gBAAA;AF0BN;AEvBQ;EACE,mCAAA;EACA,0BAAA;AFyBV;AEvBU;EACE,wBAAA;AFyBZ;AErBQ;EACE,UAAA;EACA,cAAA;EACA,wBAAA;AFuBV;AElBI;EACE,kBAAA;EACA,MAAA;EACA,UAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;EACA,4CC5DG;ED6DH,gBAAA;EACA,cAAA;EACA,gBAAA;EACA,UAAA;EACA,aAAA;EACA,4BAAA;EACA,wCACE;AFmBR;AEdE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,kBAAA;EACA,0BAAA;EACA,qBAAA;EACA,eAAA;EACA,eAAA;EACA,iCAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AFgBJ;AEdI;EACE,mCAAA;EACA,0BAAA;AFgBN;AEbI;EACE,YAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,0BAAA;AFeN;AEXE;EACE;IACE,WAAA;IACA,gBAAA;EFaJ;EEXI;IACE,gBAAA;IACA,gBAAA;IACA,6BAAA;IACA,eAAA;IACA,cAAA;IACA,kBAAA;IACA,4CAAA;IACA,gBAAA;IACA,UAAA;IACA,aAAA;IACA,gBAAA;EFaN;EEVI;IACE,cAAA;IACA,UAAA;IACA,eAAA;EFYN;EERE;IACE,wBAAA;EFUJ;EEPE;IACE,yBAAA;EFSJ;AACF","file":"dropdown.css"}