@rvx/ui 0.1.6

package/dist/index.js

@@ -0,0 +1,30 @@
+export * from "./common/events.js";
+export * from "./common/parsers.js";
+export * from "./common/theme.js";
+export * from "./common/trim.js";
+export * from "./common/types.js";
+export * from "./common/writing-mode.js";
+export * from "./components/button.js";
+export * from "./components/checkbox.js";
+export * from "./components/collapse.js";
+export * from "./components/column.js";
+export * from "./components/control-group.js";
+export * from "./components/dialog.js";
+export * from "./components/dropdown.js";
+export * from "./components/dropdown-input.js";
+export * from "./components/flex-space.js";
+export * from "./components/heading.js";
+export * from "./components/label.js";
+export * from "./components/layer.js";
+export * from "./components/link.js";
+export * from "./components/page.js";
+export * from "./components/popout.js";
+export * from "./components/popover.js";
+export * from "./components/radio-buttons.js";
+export * from "./components/row.js";
+export * from "./components/scroll-view.js";
+export * from "./components/text.js";
+export * from "./components/text-input.js";
+export * from "./components/validation.js";
+export * from "./components/value.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

package/dist/test.d.ts

@@ -0,0 +1,2 @@
+export * from "./common/theme-test.js";
+export * from "./components/collapse-test.js";

package/dist/test.js

@@ -0,0 +1,3 @@
+export * from "./common/theme-test.js";
+export * from "./components/collapse-test.js";
+//# sourceMappingURL=test.js.map

package/dist/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC"}

package/dist/theme.module.css

@@ -0,0 +1,679 @@
+:root {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1;
+  --content-column-gap: 1.1428571429rem;
+  --content-row-gap: 1.1428571429rem;
+  --content-radius: 0.5714285714rem;
+  --content-border: 0.1428571429rem;
+  --content-pad-block-start: 1.4285714286rem;
+  --content-pad-inline-start: 1.4285714286rem;
+  --content-pad-block-end: 1.4285714286rem;
+  --content-pad-inline-end: 1.4285714286rem;
+  --control-column-gap: 0.5714285714rem;
+  --control-row-gap: 0.5714285714rem;
+  --control-radius: 0.2857142857rem;
+  --control-border: 0.0714285714rem;
+  --control-disabled: opacity(.5);
+  --control-pad-block-start: 0.5714285714rem;
+  --control-pad-inline-start: 0.7142857143rem;
+  --control-pad-block-end: 0.5714285714rem;
+  --control-pad-inline-end: 0.7142857143rem;
+  --focus-outline-offset: 0.1428571429rem;
+  --overflow-safe-area: 0.2857142857rem;
+  --line-gap: 0.4285714286rem;
+  --space-gap: 0.4285714286rem;
+  --layout-transition: .15s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: rgb(32, 32, 32);
+    --fg: white;
+    --focus-outline: var(--control-border) dashed rgb(0, 127, 255);
+    color-scheme: dark;
+  }
+}
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+  text-wrap: balance;
+}
+@supports (text-wrap: pretty) {
+  body {
+    text-wrap: pretty;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  --space-scale: 1;
+  --space-above: unset;
+  --space-below: unset;
+}
+
+::selection {
+  background-color: rgba(0, 100, 200, 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --button-default-bg: rgb(54, 54, 54);
+    --button-default-bg-lit: rgb(72, 72, 72);
+    --button-default-fg: var(--fg);
+    --button-default-border: rgb(80, 80, 80);
+    --button-primary-bg: rgb(0, 100, 200);
+    --button-primary-bg-lit: rgb(0, 128, 255);
+    --button-primary-fg: white;
+    --button-primary-border: rgb(0, 100, 200);
+    --button-success-bg: rgb(0, 200, 100);
+    --button-success-bg-lit: rgb(0, 242, 121);
+    --button-success-fg: black;
+    --button-success-border: rgb(0, 200, 100);
+    --button-warning-bg: rgb(255, 200, 0);
+    --button-warning-bg-lit: rgb(255, 224, 122);
+    --button-warning-fg: black;
+    --button-warning-border: rgb(255, 200, 0);
+    --button-danger-bg: rgb(255, 0, 64);
+    --button-danger-bg-lit: rgb(255, 64, 96);
+    --button-danger-fg: black;
+    --button-danger-border: rgb(255, 0, 64);
+    --button-input-bg: rgb(16, 16, 16);
+    --button-input-bg-lit: rgb(36, 36, 36);
+    --button-input-fg: white;
+    --button-input-border: rgb(80, 80, 80);
+    color-scheme: dark;
+  }
+}
+.button {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  outline: none;
+  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
+  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
+  border-radius: var(--control-radius);
+}
+.button[disabled] {
+  cursor: default;
+  filter: var(--control-disabled);
+}
+
+.button_default {
+  background-color: var(--button-default-bg);
+  color: var(--button-default-fg);
+  border: var(--control-border) solid var(--button-default-border, transparent);
+}
+.button_default:hover:not(:active):not([disabled]), .button_default:focus-visible:not([disabled]) {
+  background-color: var(--button-default-bg-lit);
+}
+
+.button_primary {
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-fg);
+  border: var(--control-border) solid var(--button-primary-border, transparent);
+}
+.button_primary:hover:not(:active):not([disabled]), .button_primary:focus-visible:not([disabled]) {
+  background-color: var(--button-primary-bg-lit);
+}
+
+.button_success {
+  background-color: var(--button-success-bg);
+  color: var(--button-success-fg);
+  border: var(--control-border) solid var(--button-success-border, transparent);
+}
+.button_success:hover:not(:active):not([disabled]), .button_success:focus-visible:not([disabled]) {
+  background-color: var(--button-success-bg-lit);
+}
+
+.button_warning {
+  background-color: var(--button-warning-bg);
+  color: var(--button-warning-fg);
+  border: var(--control-border) solid var(--button-warning-border, transparent);
+}
+.button_warning:hover:not(:active):not([disabled]), .button_warning:focus-visible:not([disabled]) {
+  background-color: var(--button-warning-bg-lit);
+}
+
+.button_danger {
+  background-color: var(--button-danger-bg);
+  color: var(--button-danger-fg);
+  border: var(--control-border) solid var(--button-danger-border, transparent);
+}
+.button_danger:hover:not(:active):not([disabled]), .button_danger:focus-visible:not([disabled]) {
+  background-color: var(--button-danger-bg-lit);
+}
+
+.button_input {
+  background-color: var(--button-input-bg);
+  color: var(--button-input-fg);
+  border: var(--control-border) solid var(--button-input-border, transparent);
+}
+.button_input:hover:not(:active):not([disabled]), .button_input:focus-visible:not([disabled]) {
+  background-color: var(--button-input-bg-lit);
+}
+
+.button_input {
+  text-align: left;
+}
+
+.checkbox_label {
+  display: flex;
+  column-gap: var(--control-column-gap);
+  align-items: start;
+}
+.checkbox_label:has(.checkbox_input:not(:disabled)) {
+  cursor: pointer;
+}
+.checkbox_label:has(.checkbox_input:disabled) > .checkbox_content {
+  filter: var(--control-disabled);
+}
+.checkbox_label:has(.checkbox_input:focus-visible) {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.checkbox_input {
+  margin: 0;
+  outline: none;
+  cursor: inherit;
+}
+
+.collapse {
+  display: block;
+  position: relative;
+  --space-scale: 0;
+}
+
+.collapse_sized {
+  transition: margin-block-start var(--layout-transition), margin-block-end var(--layout-transition);
+}
+
+@keyframes alert {
+  from {
+    transform: translateX(0rem);
+  }
+  30% {
+    transform: translateX(0.2rem);
+  }
+  70% {
+    transform: translateX(-0.2rem);
+  }
+  to {
+    transform: translateX(0rem);
+  }
+}
+.collapse_alert {
+  animation: alert 0.2s ease;
+}
+
+.collapse_visible.collapse_visible {
+  --space-scale: 1;
+}
+
+.collapse_view {
+  block-size: 0px;
+  position: relative;
+  overflow: hidden;
+}
+.collapse_sized > .collapse_view {
+  transition: block-size var(--layout-transition), margin var(--layout-transition);
+}
+.collapse_visible > .collapse_view {
+  block-size: calc(var(--collapse-size) + var(--overflow-safe-area) * 2);
+  margin: calc(var(--overflow-safe-area) * -1);
+}
+
+.collapse_content {
+  position: absolute;
+  inline-size: 100%;
+  top: 0px;
+  left: 0px;
+}
+.collapse_sized > * > .collapse_content {
+  transition: top var(--layout-transition), left var(--layout-transition), inline-size var(--layout-transition);
+}
+.collapse_visible .collapse_content {
+  top: var(--overflow-safe-area);
+  left: var(--overflow-safe-area);
+  inline-size: calc(100% - var(--overflow-safe-area) * 2);
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+.column > :not(:first-child) {
+  margin-block-start: calc((var(--space-above, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale) + var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+}
+.column > :not(:last-child) {
+  margin-block-end: calc((var(--space-below, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale) + var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+}
+
+.column_content {
+  row-gap: var(--content-row-gap);
+}
+.column_content > * {
+  --parent-row-gap: var(--content-row-gap);
+}
+
+.column_control {
+  row-gap: var(--control-row-gap);
+}
+.column_control > * {
+  --parent-row-gap: var(--control-row-gap);
+}
+
+.control_group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.control_group > :not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.control_group > :not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dialog-container-bg: rgba(32, 32, 32, 0.8);
+    --dialog-bg: var(--bg);
+    --dialog-border: rgb(72, 72, 72);
+    --dialog-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
+    color-scheme: dark;
+  }
+}
+.dialog_container {
+  position: fixed;
+  inset: 0;
+  background-color: var(--dialog-container-bg);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: 3fr auto 4fr;
+  overflow: auto;
+}
+
+.dialog_body {
+  grid-row: 2/3;
+  grid-column: 2/3;
+  background-color: var(--dialog-bg);
+  box-shadow: var(--dialog-shadow);
+  border-radius: var(--content-radius);
+  border: var(--content-border) solid var(--dialog-border);
+  padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
+  padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
+}
+
+.dialog_footer {
+  --space-above: 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dropdown-bg: var(--bg);
+    --dropdown-border: rgb(72, 72, 72);
+    --dropdown-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+    --dropdown-item-active-bg: rgb(63, 63, 63);
+    color-scheme: dark;
+  }
+}
+.dropdown {
+  position: relative;
+  outline: none;
+}
+.dropdown:not(.dropdown_expansion) {
+  min-inline-size: var(--popout-anchor-inline-size);
+}
+
+.dropdown_scroll_area {
+  background-color: var(--dropdown-bg);
+  box-shadow: var(--dropdown-shadow);
+  border-radius: var(--control-radius);
+  max-block-size: var(--popout-max-block-size);
+  max-inline-size: var(--popout-max-inline-size);
+  overflow: auto;
+}
+
+.dropdown_content {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--control-radius);
+  border: var(--content-border) solid var(--dropdown-border);
+}
+
+.dropdown_item {
+  cursor: pointer;
+  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
+  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
+}
+.dropdown_item.dropdown_item_active {
+  background-color: var(--dropdown-item-active-bg);
+}
+
+.flex_space {
+  flex-basis: 0;
+  pointer-events: none;
+  --space-scale: 0;
+}
+
+.heading {
+  line-height: calc(1em + var(--line-gap));
+  margin-block: 0;
+}
+.heading::before, .heading::after {
+  content: "";
+  display: block;
+  pointer-events: none;
+  margin-block-start: calc(var(--line-gap) / -2);
+}
+
+h1.heading {
+  font-size: 2.4rem;
+  font-weight: 600;
+  --space-above: 5rem;
+}
+
+h2.heading {
+  font-size: 1.8rem;
+  font-weight: 600;
+  --space-above: 3.2rem;
+}
+
+h3.heading {
+  font-size: 1.5rem;
+  font-weight: 600;
+  --space-above: 2.4rem;
+}
+
+h4.heading,
+h5.heading,
+h6.heading {
+  font-size: 1.2rem;
+  font-weight: 600;
+  --space-above: 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --label-fg: rgb(200, 200, 200);
+    color-scheme: dark;
+  }
+}
+.label {
+  --space-below: var(--control-row-gap);
+  line-height: calc(1em + var(--line-gap));
+  color: var(--label-fg);
+  font-size: 0.87rem;
+  font-weight: 600;
+}
+.label::before, .label::after {
+  content: "";
+  display: block;
+  pointer-events: none;
+  margin-block-start: calc(var(--line-gap) / -2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --link-fg: rgb(64, 160, 255);
+    color-scheme: dark;
+  }
+}
+.link {
+  --space-below: var(--control-row-gap);
+  line-height: calc(1em + var(--line-gap));
+  color: var(--link-fg);
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+.link:focus {
+  outline: none;
+}
+.link:focus-visible {
+  text-decoration: underline;
+}
+
+.page {
+  margin: 2rem;
+  display: flex;
+  justify-content: center;
+}
+
+.page_scrollbar_comp {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-inline-size: var(--scrollbar-comp, 0);
+}
+
+.page_content_col {
+  flex-grow: 1;
+  max-inline-size: var(--page-inline-size);
+  flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0));
+}
+
+.page_content {
+  --scrollbar-size: 0rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --popover-bg: var(--bg);
+    --popover-border: rgb(72, 72, 72);
+    --popover-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+    color-scheme: dark;
+  }
+}
+.popover {
+  position: relative;
+  outline: none;
+}
+
+.popover_spike_area {
+  pointer-events: none;
+  position: absolute;
+  inset: -1rem;
+  z-index: 1;
+}
+
+.popover_spike {
+  position: relative;
+  transform-origin: bottom;
+  width: 2rem;
+  height: 1rem;
+  --popover-spike-min-offset: 1rem;
+}
+.popover_spike svg {
+  width: 2rem;
+  height: 1rem;
+  fill: var(--popover-border);
+  transform-origin: bottom;
+  transform: scale(0.75);
+  stroke: none;
+}
+
+.popover_scroll_area {
+  background-color: var(--popover-bg);
+  box-shadow: var(--popover-shadow);
+  border-radius: var(--content-radius);
+  max-block-size: var(--popout-max-block-size);
+  max-inline-size: var(--popout-max-inline-size);
+  overflow: auto;
+}
+
+.popover_content {
+  border-radius: var(--content-radius);
+  border: var(--content-border) solid var(--popover-border);
+  padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
+  padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
+}
+
+.radio_buttons {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--control-row-gap);
+}
+.radio_buttons:has(.radio_button_input:focus-visible) {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.radio_button_label {
+  display: flex;
+  column-gap: var(--control-column-gap);
+  align-items: start;
+}
+.radio_button_label:has(.radio_button_input:not(:disabled)) {
+  cursor: pointer;
+}
+.radio_button_label:has(.radio_button_input:disabled) > .radio_button_content {
+  filter: var(--control-disabled);
+}
+
+.radio_button_input {
+  margin: 0;
+  outline: none;
+  cursor: inherit;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.row_content {
+  column-gap: var(--content-column-gap);
+  row-gap: var(--content-row-gap);
+}
+.row_content > * {
+  --parent-column-gap: var(--content-column-gap);
+  --parent-row-gap: var(--content-row-gap);
+}
+
+.row_control {
+  column-gap: var(--control-column-gap);
+  row-gap: var(--control-row-gap);
+}
+.row_control > * {
+  --parent-column-gap: var(--control-column-gap);
+  --parent-row-gap: var(--control-row-gap);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --scroll-view-indicator-size: 1.5rem;
+    --scroll-view-indicator-color: rgba(0, 0, 0, 0.7);
+    color-scheme: dark;
+  }
+}
+.scroll_view {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.scroll_view_area {
+  position: absolute;
+  inset: 0;
+}
+
+.scroll_view_content {
+  inline-size: 100%;
+  min-block-size: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll_view_indicator_start,
+.scroll_view_indicator_end {
+  position: absolute;
+  inset-inline: 0;
+  block-size: var(--scroll-view-indicator-size);
+  box-shadow: 0 0 var(--scroll-view-indicator-size) var(--scroll-view-indicator-color);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--layout-transition);
+}
+
+.scroll_view_indicator_start {
+  inset-block-end: 100%;
+}
+
+.scroll_view_indicator_end {
+  inset-block-start: 100%;
+}
+
+.scroll_view_indicator_visible {
+  opacity: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-input-bg: rgb(16, 16, 16);
+    --text-input-fg: white;
+    --text-input-border: rgb(80, 80, 80);
+    --text-input-border-lit: rgb(0, 128, 255);
+    color-scheme: dark;
+  }
+}
+.text_input {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  cursor: text;
+  outline: none;
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+  border: var(--control-border) solid var(--text-input-border);
+  border-radius: var(--control-radius);
+  background-color: var(--text-input-bg);
+  color: var(--text-input-fg);
+}
+.text_input:focus {
+  border-color: var(--text-input-border-lit);
+}
+.text_input[disabled] {
+  filter: var(--control-disabled);
+  cursor: default;
+}
+
+input.text_input {
+  block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end));
+}
+
+.text {
+  line-height: calc(1em + var(--line-gap));
+}
+.text::before, .text::after {
+  content: "";
+  display: block;
+  pointer-events: none;
+  margin-block-start: calc(var(--line-gap) / -2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --validation-message-fg: rgb(255, 84, 127);
+    color-scheme: dark;
+  }
+}
+.validation_message {
+  color: var(--validation-message-fg);
+}
+
+.validation_message_container {
+  --space-above: 0.5rem;
+}
+
+.value {
+  font-weight: 600;
+}
+
+/*# sourceMappingURL=theme.module.css.map */