@yr3/ui 1.0.0

package/dist/components/Container/container.css

@@ -0,0 +1,39 @@
+.yr3Container {
+  width: 100%;
+  margin: 0 auto;
+  background: var(--color-background, #000000);
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  align-self: baseline;
+  align-items: center;
+}
+.yr3Container--static {
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/* ===== BREAKPOINTS ===== */
+@media (min-width: 600px) {
+  .yr3Container--sm {
+    max-width: 600px;
+  }
+}
+@media (min-width: 900px) {
+  .yr3Container--md {
+    max-width: 900px;
+  }
+}
+@media (min-width: 1200px) {
+  .yr3Container--lg {
+    max-width: 1200px;
+    padding: 0px 24px;
+  }
+}
+@media (min-width: 1536px) {
+  .yr3Container--xl {
+    max-width: 1536px;
+  }
+}
+
+/*# sourceMappingURL=container.css.map */

package/dist/components/Container/container.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Container/container.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAIJ;AAEA;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE","file":"container.css"}

package/dist/components/Control/control.css

@@ -0,0 +1,92 @@
+.yr3Control {
+  position: relative;
+  display: flex;
+  border: none;
+  justify-content: flex-start;
+  align-items: flex-end;
+  background: transparent;
+  border-radius: var(--border-radius);
+  padding-block-start: 2px;
+  height: 34px;
+  width: auto;
+  z-index: 1;
+}
+.yr3Control--base {
+  border: none;
+  background: transparent;
+}
+.yr3Control--outlined {
+  border: 1px solid var(--input-border);
+  background: transparent;
+}
+.yr3Control--filled {
+  background: var(--input-bg);
+  border: 1px solid transparent;
+}
+.yr3Control--lined {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--input-color);
+  --border-radius: 0px;
+}
+.yr3Control > .yr3Text--helper {
+  --typo-size: 10px;
+  position: absolute;
+  left: 8px;
+  bottom: -10px;
+  --typo-weight: var(--fontWeight-light);
+}
+
+.yr3Control--color-primary {
+  --input-bg: var(--color-primary);
+  --input-border: var(--color-primary);
+  --input-color: var(--color-primary);
+}
+
+.yr3Control--color-secondary {
+  --input-bg: var(--color-secondary);
+  --input-border: var(--color-secondary);
+  --input-color: var(--color-secondary);
+}
+
+.yr3Control--color-success {
+  --input-bg: var(--color-success);
+  --input-border: var(--color-success);
+  --input-color: var(--color-success);
+}
+
+.yr3Control--color-error {
+  --input-bg: var(--color-error);
+  --input-border: var(--color-error);
+  --input-color: var(--color-error);
+}
+
+.yr3Control--color-warning {
+  --input-bg: var(--color-warning);
+  --input-border: var(--color-warning);
+  --input-color: var(--color-warning);
+}
+
+.yr3Control--color-info {
+  --input-bg: var(--color-info);
+  --input-border: var(--color-info);
+  --input-color: var(--color-info);
+}
+
+.yr3Control--color-disabled {
+  --input-bg: var(--color-disabled);
+  --input-border: var(--color-disabled);
+  --input-color: var(--color-disabled);
+}
+
+.yr3Control--color-background {
+  --input-bg: var(--color-surface);
+  --input-border: var(--color-surface);
+  --input-color: var(--color-text-primary);
+}
+
+.yr3Control--label {
+  height: 48px;
+}
+
+/*# sourceMappingURL=control.css.map */

package/dist/components/Control/control.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Control/control.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE","file":"control.css"}

package/dist/components/Divider/divider.css

@@ -0,0 +1,83 @@
+.yr3Divider {
+  width: 100%;
+  position: relative;
+}
+
+/* ===== ORIENTATION ===== */
+.yr3Divider--vertical {
+  width: 1px;
+  display: inline-flex;
+  border-top: none;
+  border-left: 1px solid var(--color-divider, var(--color-primary));
+  height: 100%;
+}
+
+.yr3Divider--horizontal {
+  border-top: 1px solid var(--color-divider, var(--color-primary));
+}
+
+/* ===== WITH TEXT ===== */
+.yr3Divider--withText {
+  display: flex;
+  align-items: center;
+  border: none;
+}
+
+.yr3Divider--withText::before,
+.yr3Divider--withText::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--color-divider, var(--color-primary));
+}
+
+/* ===== TEXT ===== */
+.yr3Divider__text {
+  padding: 0 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+/* ===== ALIGN ===== */
+.yr3Divider--left::before {
+  flex: 0.2;
+}
+
+.yr3Divider--right::after {
+  flex: 0.2;
+}
+
+/* ===== COLORS ===== */
+.yr3Divider--color-primary {
+  --color-divider: var(--color-primary, var(--color-primary));
+}
+
+.yr3Divider--color-secondary {
+  --color-divider: var(--color-secondary, var(--color-primary));
+}
+
+.yr3Divider--color-success {
+  --color-divider: var(--color-success, var(--color-primary));
+}
+
+.yr3Divider--color-error {
+  --color-divider: var(--color-error, var(--color-primary));
+}
+
+.yr3Divider--color-warning {
+  --color-divider: var(--color-warning, var(--color-primary));
+}
+
+.yr3Divider--color-info {
+  --color-divider: var(--color-info, var(--color-primary));
+}
+
+.yr3Divider--color-disabled {
+  --color-divider: var(--color-disabled, var(--color-primary));
+}
+
+.yr3Divider--color-text {
+  --color-divider: var(--color-text, var(--color-primary));
+}
+
+/*# sourceMappingURL=divider.css.map */

package/dist/components/Divider/divider.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Divider/divider.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"divider.css"}

package/dist/components/Drawer/drawer.css

@@ -0,0 +1,70 @@
+.yr3Drawer {
+  position: fixed;
+  transition: transform 0.3s ease;
+  will-change: transform;
+  z-index: 3;
+}
+
+/* ===== LEFT ===== */
+.yr3Drawer--left {
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100%;
+  transform: translateX(-100%);
+}
+
+.yr3Drawer--left.yr3Drawer--open {
+  transform: translateX(0);
+  z-index: 3;
+}
+
+/* ===== RIGHT ===== */
+.yr3Drawer--right {
+  top: 0;
+  right: 0;
+  width: 250px;
+  height: 100%;
+  transform: translateX(100%);
+}
+
+.yr3Drawer--right.yr3Drawer--open {
+  transform: translateX(0);
+  z-index: 3;
+}
+
+/* ===== TOP ===== */
+.yr3Drawer--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 250px;
+  transform: translateY(-100%);
+}
+
+.yr3Drawer--top.yr3Drawer--open {
+  transform: translateY(0);
+  z-index: 3;
+}
+
+/* ===== BOTTOM ===== */
+.yr3Drawer--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(100%);
+}
+
+.yr3Drawer--bottom.yr3Drawer--open {
+  transform: translateY(0);
+}
+.yr3Drawer--bottom.yr3Drawer--open .yr3Drawer--container {
+  background: var(--color-surface);
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  padding-bottom: 24px;
+  z-index: 3;
+}
+
+/*# sourceMappingURL=drawer.css.map */

package/dist/components/Drawer/drawer.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Drawer/drawer.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACE;;;AAGJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA","file":"drawer.css"}

package/dist/components/Fade/fade.css

@@ -0,0 +1,10 @@
+.yr3Fade {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.yr3Fade--in {
+  opacity: 1;
+}
+
+/*# sourceMappingURL=fade.css.map */

package/dist/components/Fade/fade.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Fade/fade.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE","file":"fade.css"}

package/dist/components/Flex/flex.css

@@ -0,0 +1,51 @@
+.yr3Flex {
+  display: flex;
+  box-sizing: border-box;
+}
+
+.yr3Flex--container {
+  display: flex;
+  width: 100%;
+}
+.yr3Flex--container.yr3Flex--row {
+  flex-direction: row;
+}
+.yr3Flex--container.yr3Flex--column {
+  flex-direction: column;
+}
+.yr3Flex--container.yr3Flex--wrap {
+  flex-wrap: wrap;
+  width: 90dvw;
+  align-items: center;
+  justify-content: center;
+}
+.yr3Flex--container.yr3Flex--spacing-0 {
+  gap: 0px;
+}
+.yr3Flex--container.yr3Flex--spacing-1 {
+  gap: 8px;
+}
+.yr3Flex--container.yr3Flex--spacing-2 {
+  gap: 16px;
+}
+.yr3Flex--container.yr3Flex--spacing-3 {
+  gap: 24px;
+}
+
+.yr3Flex--center {
+  justify-content: center;
+  align-items: center;
+}
+
+.yr3Flex--between {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.yr3Flex--bordered {
+  border: 1px solid var(--color-disabled);
+  padding: 16px;
+  border-radius: 8px;
+}
+
+/*# sourceMappingURL=flex.css.map */

package/dist/components/Flex/flex.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Flex/flex.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACI;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA","file":"flex.css"}

package/dist/components/Grid/Grid.css

@@ -0,0 +1,67 @@
+.yr3Grid {
+  box-sizing: border-box;
+  display: grid;
+}
+
+.yr3Grid--container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+/* ===== ITEM ===== */
+/* ===== SPACING ===== */
+/* default xs */
+.yr3Grid--Col-1 {
+  grid-column: span 1;
+}
+
+.yr3Grid--Col-2 {
+  grid-column: span 2;
+}
+
+.yr3Grid--Col-3 {
+  grid-column: span 3;
+}
+
+.yr3Grid--Col-4 {
+  grid-column: span 4;
+}
+
+.yr3Grid--Col-5 {
+  grid-column: span 5;
+}
+
+.yr3Grid--Col-6 {
+  grid-column: span 6;
+}
+
+.yr3Grid--Col-7 {
+  grid-column: span 7;
+}
+
+.yr3Grid--Col-8 {
+  grid-column: span 8;
+}
+
+.yr3Grid--Col-9 {
+  grid-column: span 9;
+}
+
+.yr3Grid--Col-10 {
+  grid-column: span 10;
+}
+
+.yr3Grid--Col-11 {
+  grid-column: span 11;
+}
+
+.yr3Grid--Col-12 {
+  grid-column: span 12;
+}
+
+/* sm */
+/* md */
+/* lg */
+
+/*# sourceMappingURL=Grid.css.map */

package/dist/components/Grid/Grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Grid/Grid.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAWJ;AAKA;AAgBA;AACA;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAkB;;;AAClB;EAAmB;;;AACnB;EAAmB;;;AACnB;EAAmB;;;AAEnB;AAMA;AAQA","file":"Grid.css"}

package/dist/components/Group/group.css

@@ -0,0 +1,132 @@
+.yr3Group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  overflow: hidden;
+}
+
+/* ITEM */
+.yr3Group--item {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: 0.2s;
+  user-select: none;
+  border-radius: var(--group-item-radius, 0px);
+}
+
+/* ===== VARIANTS ===== */
+.yr3Group--filled {
+  border: 1px solid;
+  border-color: var(--group-border-color, var(--color-primary));
+  background: var(--bg-group, var(--color-primary));
+  --group-bg-item: var(--color-surface, #fff);
+  border-radius: 40px;
+}
+.yr3Group--filled .yr3Group--item {
+  color: var(--color-surface, var(--color-surface));
+  border-radius: 40px;
+}
+.yr3Group--filled .yr3Group--item--active {
+  background: var(--color-surface);
+  color: var(--group-color-text);
+}
+
+.yr3Group--outlined {
+  border: 1px solid;
+  border-color: var(--group-border-color, var(--color-primary));
+  border-radius: 40px;
+}
+.yr3Group--outlined .yr3Group--item {
+  background: var(--group-bg-item, transparent);
+  color: var(--group-color-text);
+}
+.yr3Group--outlined .yr3Group--item--active {
+  background: var(--group-active, var(--color-surface));
+  color: var(--color-surface);
+}
+
+.yr3Group--text {
+  background: transparent;
+}
+.yr3Group--text .yr3Group--item {
+  background: transparent;
+  color: var(--color-disabled);
+}
+.yr3Group--text .yr3Group--item--active {
+  background: transparent;
+  color: var(--group-active, var(--color-primary));
+}
+
+/* ===== COLORS ===== */
+.yr3Group--color-primary {
+  --group-active: var(--color-primary);
+  --bg-group: var(--color-primary);
+  --group-border-color: var(--color-primary);
+  --group-color-text: var(--color-primary);
+}
+
+.yr3Group--color-secondary {
+  --group-active: var(--color-secondary);
+  --bg-group: var(--color-secondary);
+  --group-border-color: var(--color-secondary);
+  --group-color-text: var(--color-secondary);
+}
+
+.yr3Group--color-error {
+  --group-active: var(--color-error);
+  --bg-group: var(--color-error);
+  --group-border-color: var(--color-error);
+  --group-color-text: var(--color-error);
+}
+
+.yr3Group--color-warning {
+  --group-active: var(--color-warning);
+  --bg-group: var(--color-warning);
+  --group-border-color: var(--color-warning);
+  --group-color-text: var(--color-warning);
+}
+
+.yr3Group--color-info {
+  --group-active: var(--color-info);
+  --bg-group: var(--color-info);
+  --group-border-color: var(--color-info);
+  --group-color-text: var(--color-info);
+}
+
+.yr3Group--color-disabled {
+  --group-active: var(--color-disabled);
+  --bg-group: var(--color-disabled);
+  --group-border-color: var(--color-disabled);
+  --group-color-text: var(--color-disabled);
+}
+
+.yr3Group--color-text {
+  --group-active: var(--color-text);
+  --bg-group: var(--color-text);
+  --group-border-color: var(--color-text);
+  --group-color-text: var(--color-text);
+}
+
+.yr3Group--color-background {
+  --group-active: var(--color-text-primary);
+  --bg-group: var(--color-surface);
+  --group-border-color: var(--color-surface);
+  --group-color-text: var(--color-text-primary);
+}
+
+.yr3Group--color-success {
+  --group-active: var(--color-success);
+  --bg-group: var(--color-success);
+  --group-border-color: var(--color-success);
+  --group-color-text: var(--color-success);
+}
+
+.yr3Group--color-text {
+  --group-active: var(--color-text-primary);
+  --bg-group: var(--color-text-primary);
+  --group-border-color: var(--color-text-primary);
+  --group-color-text: var(--color-text-primary);
+}
+
+/*# sourceMappingURL=group.css.map */

package/dist/components/Group/group.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA","file":"group.css"}

package/dist/components/Image/image.css

@@ -0,0 +1,8 @@
+.yr3Image {
+  object-fit: cover;
+  width: 100dvw;
+  height: 100dvh;
+  z-index: 0;
+}
+
+/*# sourceMappingURL=image.css.map */

package/dist/components/Image/image.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Image/image.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA","file":"image.css"}

package/dist/components/ImageDropzone/image-dropzone.css

@@ -0,0 +1,55 @@
+.yr3Dropzone {
+  margin: 0 auto;
+  cursor: pointer;
+  text-align: center;
+  transition: 0.2s;
+  padding: var(--radius-md);
+}
+.yr3Dropzone--dragging {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+}
+
+.yr3Dropzone--outlined {
+  border: 2px dashed var(--color-disabled);
+}
+
+.yr3Dropzone--base {
+  border: none;
+}
+
+.yr3Dropzone--content {
+  color: var(--color-text-secondary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60%;
+  margin: 0 auto;
+  min-height: 40px;
+  padding: var(--radius-md);
+}
+
+.yr3Dropzone--preview {
+  display: flex;
+}
+.yr3Dropzone--preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.yr3Dropzone--previews {
+  display: flex;
+  margin: 0 auto;
+  border-bottom: 8px;
+  flex-wrap: wrap;
+}
+.yr3Dropzone--previews img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+/*# sourceMappingURL=image-dropzone.css.map */

package/dist/components/ImageDropzone/image-dropzone.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/ImageDropzone/image-dropzone.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;;AACA;EACE;EACA;EACA;EACA;;;AAIN;EACI;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA","file":"image-dropzone.css"}