react-ui-suite 0.1.0 → 1.1.1

package/dist/Radio-K6CDDBCQ.css

@@ -0,0 +1,227 @@
+.rui-radio {
+  --rui-radio-accent-border: rgb(148 163 184 / 1);
+  --rui-radio-accent-dot: rgb(15 23 42 / 1);
+  --rui-radio-accent-focus: #94a3b8;
+  --rui-radio-checked-bg: rgb(241 245 249 / 1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-radius: 1rem;
+  border: 1px solid transparent;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rui-radio:hover {
+  background-color: rgb(248 250 252 / 1);
+}
+
+.rui-radio:focus-within {
+  background-color: rgb(248 250 252 / 1);
+}
+
+.rui-radio:is([data-theme="dark"] *) {
+  --rui-radio-accent-border: rgb(161 161 170 / 1);
+  --rui-radio-accent-dot: rgb(244 244 245 / 1);
+  --rui-radio-accent-focus: rgb(100 116 139 / 1);
+  --rui-radio-checked-bg: rgb(24 24 27 / 1);
+}
+
+.rui-radio:hover:is([data-theme="dark"] *),
+.rui-radio:focus-within:is([data-theme="dark"] *) {
+  background-color: rgb(24 24 27 / 0.6);
+}
+
+.rui-radio--color-blue {
+  --rui-radio-accent-border: rgb(59 130 246 / 1);
+  --rui-radio-accent-dot: rgb(59 130 246 / 1);
+  --rui-radio-accent-focus: rgb(59 130 246 / 1);
+}
+
+.rui-radio--color-green {
+  --rui-radio-accent-border: rgb(34 197 94 / 1);
+  --rui-radio-accent-dot: rgb(34 197 94 / 1);
+  --rui-radio-accent-focus: rgb(34 197 94 / 1);
+}
+
+.rui-radio--color-red {
+  --rui-radio-accent-border: rgb(239 68 68 / 1);
+  --rui-radio-accent-dot: rgb(239 68 68 / 1);
+  --rui-radio-accent-focus: rgb(239 68 68 / 1);
+}
+
+.rui-radio--color-blue:is([data-theme="dark"] *) {
+  --rui-radio-accent-border: rgb(147 197 253 / 1);
+  --rui-radio-accent-dot: rgb(147 197 253 / 1);
+  --rui-radio-accent-focus: rgb(147 197 253 / 1);
+}
+
+.rui-radio--color-green:is([data-theme="dark"] *) {
+  --rui-radio-accent-border: rgb(134 239 172 / 1);
+  --rui-radio-accent-dot: rgb(134 239 172 / 1);
+  --rui-radio-accent-focus: rgb(134 239 172 / 1);
+}
+
+.rui-radio--color-red:is([data-theme="dark"] *) {
+  --rui-radio-accent-border: rgb(252 165 165 / 1);
+  --rui-radio-accent-dot: rgb(252 165 165 / 1);
+  --rui-radio-accent-focus: rgb(252 165 165 / 1);
+}
+
+
+.rui-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.rui-radio__content {
+  display: flex;
+  flex: 1 1 0%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.rui-radio__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.rui-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.rui-radio__control {
+  position: relative;
+  display: grid;
+  width: 1.25rem;
+  height: 1.25rem;
+  place-items: center;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  border: 1px solid rgb(203 213 225 / 1);
+  background-color: rgb(255 255 255 / 1);
+  color: rgb(71 85 105 / 1);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rui-radio__control:is([data-theme="dark"] *) {
+  border-color: rgb(82 82 91 / 1);
+  background-color: rgb(24 24 27 / 1);
+  color: rgb(228 228 231 / 1);
+}
+
+.rui-radio__input:checked + .rui-radio__control {
+  border-color: var(--rui-radio-accent-border);
+  background-color: var(--rui-radio-checked-bg);
+}
+
+.rui-radio__control::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: var(--rui-radio-accent-dot);
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.6);
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.rui-radio__input:checked + .rui-radio__control::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.rui-radio__input:focus-visible + .rui-radio__control {
+  outline: 2px solid var(--rui-radio-accent-focus);
+  outline-offset: 2px;
+}
+
+.rui-radio:not(.rui-radio--disabled):hover .rui-radio__control {
+  border-color: var(--rui-radio-accent-border);
+}
+
+.rui-radio__meta {
+  display: flex;
+  flex: 1 1 0%;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.radio-demo__density-card .rui-radio__meta {
+  align-items: center;
+  text-align: center;
+}
+
+.rui-radio__label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  color: rgb(15 23 42 / 1);
+}
+
+.rui-radio__label:is([data-theme="dark"] *) {
+  color: rgb(244 244 245 / 1);
+}
+
+.rui-radio__description {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(100 116 139 / 1);
+}
+
+.rui-radio__description:is([data-theme="dark"] *) {
+  color: rgb(161 161 170 / 1);
+}
+
+.rui-radio__extra {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: rgb(71 85 105 / 1);
+}
+
+.rui-radio__extra:is([data-theme="dark"] *) {
+  color: rgb(228 228 231 / 1);
+}

package/dist/ResizableContainer-KIX7YKZJ.css

@@ -0,0 +1,165 @@
+.rui-resizable {
+  --rui-resize-radius: 1rem;
+  --rui-resize-border: 1px solid var(--rui-color-border);
+  --rui-resize-bg: var(--rui-color-surface);
+  --rui-resize-shadow: var(--rui-shadow-button);
+  --rui-resize-handle-size: 1.5rem;
+  --rui-resize-handle-bg: transparent;
+  --rui-resize-handle-fg: var(--rui-color-text-muted);
+  --rui-resize-handle-inset: 0.5rem;
+  --rui-resize-handle-scrollbar-offset: 0.75rem;
+  --rui-resize-content-padding: 0.75rem;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  border-radius: var(--rui-resize-radius);
+  border: var(--rui-resize-border);
+  background: var(--rui-resize-bg);
+  box-shadow: var(--rui-resize-shadow);
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.rui-resizable[data-resizing="true"] {
+  border-color: var(--rui-color-border-strong);
+}
+
+.rui-resizable__content {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--rui-resize-content-padding);
+  color: var(--rui-color-text-strong);
+  scrollbar-width: none;
+}
+
+.rui-resizable__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.rui-resizable__scrollbar {
+  position: absolute;
+  z-index: 10;
+  border-radius: 9999px;
+  background-color: rgb(255 255 255 / 0.8);
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
+  pointer-events: auto;
+}
+
+.rui-resizable__scrollbar-track {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  background-color: rgb(15 23 42 / 0.05);
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
+}
+
+.rui-resizable__scrollbar-thumb {
+  position: absolute;
+  border-radius: 9999px;
+  background-color: rgb(148 163 184 / 0.8);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  transition: background-color 150ms ease;
+}
+
+.rui-resizable__scrollbar--vertical .rui-resizable__scrollbar-thumb {
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+}
+
+.rui-resizable__scrollbar--horizontal .rui-resizable__scrollbar-thumb {
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100%;
+}
+
+.rui-resizable:not([data-resizing="true"]) .rui-resizable__scrollbar-thumb:hover {
+  background-color: rgb(100 116 139 / 0.8);
+}
+
+.rui-resizable[data-resizing="true"] .rui-resizable__scrollbar-thumb {
+  background-color: rgb(100 116 139 / 0.9);
+}
+
+.rui-resizable__handle {
+  position: absolute;
+  right: var(--rui-resize-handle-inset);
+  bottom: var(--rui-resize-handle-inset);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rui-resize-handle-size);
+  height: var(--rui-resize-handle-size);
+  border: var(--rui-resize-border);
+  border-radius: 0.35rem;
+  background: var(--rui-resize-handle-bg);
+  color: var(--rui-resize-handle-fg);
+  cursor: nwse-resize;
+  touch-action: none;
+  user-select: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.rui-resizable[data-scrollbar-x="true"] .rui-resizable__handle {
+  bottom: calc(var(--rui-resize-handle-inset) + var(--rui-resize-handle-scrollbar-offset));
+}
+
+.rui-resizable[data-scrollbar-y="true"] .rui-resizable__handle {
+  right: calc(var(--rui-resize-handle-inset) + var(--rui-resize-handle-scrollbar-offset));
+}
+
+.rui-resizable[data-axis="x"] .rui-resizable__handle {
+  cursor: ew-resize;
+}
+
+.rui-resizable[data-axis="y"] .rui-resizable__handle {
+  cursor: ns-resize;
+}
+
+.rui-resizable__handle:hover {
+  color: var(--rui-color-text-strong);
+}
+
+.rui-resizable[data-resizing="true"] .rui-resizable__handle {
+  color: var(--rui-color-text-strong);
+}
+
+.rui-resizable__handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--rui-color-focus-ring);
+}
+
+.rui-resizable__handle-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+[data-theme="dark"] .rui-resizable__scrollbar {
+  background-color: rgb(24 24 27 / 0.7);
+}
+
+[data-theme="dark"] .rui-resizable__scrollbar-track {
+  background-color: rgb(255 255 255 / 0.1);
+}
+
+[data-theme="dark"] .rui-resizable__scrollbar-thumb {
+  background-color: rgb(113 113 122 / 0.7);
+}
+
+[data-theme="dark"] .rui-resizable__scrollbar-thumb:hover {
+  background-color: rgb(148 163 184 / 0.6);
+}

package/dist/Select-UA2CM52H.css

@@ -0,0 +1,216 @@
+.rui-select {
+}
+
+.rui-select > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.375rem;
+  margin-bottom: 0;
+}
+
+.rui-select__label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: rgb(100 116 139 / 1);
+}
+
+.rui-select__label:is([data-theme="dark"] *) {
+  color: rgb(161 161 170 / 1);
+}
+
+.rui-select__dropdown {
+  width: 100%;
+}
+
+.rui-select__dropdown--error {
+  border-color: rgb(253 164 175 / 1);
+}
+
+.rui-select__dropdown--error:focus-within {
+  border-color: rgb(251 113 133 / 1);
+  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
+}
+
+.rui-select__dropdown--error:is([data-theme="dark"] *) {
+  border-color: rgb(244 63 94 / 0.6);
+}
+
+.rui-select__dropdown--error:focus-within:is([data-theme="dark"] *) {
+  border-color: rgb(251 113 133 / 1);
+}
+
+.rui-select__highlightBorder {
+  border-color: #94a3b8;
+}
+
+.rui-select__highlightBorder:is([data-theme="dark"] *) {
+  border-color: #64748b;
+}
+
+.rui-select__input {
+  font-weight: 600;
+}
+
+.rui-select__list {
+  margin: 0;
+  padding: 0rem 1rem 0rem 0.25rem;
+  list-style: none;
+  max-height: 16rem;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.rui-select__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.rui-select__option {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rui-select__option-button {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  border: none;
+  border-radius: 0.75rem;
+  background: transparent;
+  box-shadow: none;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  text-align: left;
+  color: rgb(51 65 85 / 1);
+  appearance: none;
+  cursor: pointer;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.rui-select__option-button:is([data-theme="dark"] *) {
+  color: rgb(228 228 231 / 1);
+}
+
+.rui-select__option-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.6);
+}
+
+.rui-select__option-button:not(:disabled):not(.rui-select__option-button--selected):hover {
+  background-color: rgb(241 245 249 / 1);
+}
+
+.rui-select__option-button:not(:disabled):not(.rui-select__option-button--selected):hover:is([data-theme="dark"] *) {
+  background-color: rgb(39 39 42 / 0.7);
+}
+
+.rui-select__option-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.rui-select__option-button--active {
+  background-color: rgb(241 245 249 / 1);
+  color: rgb(15 23 42 / 1);
+}
+
+.rui-select__option-button--active:is([data-theme="dark"] *) {
+  background-color: rgb(39 39 42 / 0.7);
+  color: rgb(244 244 245 / 1);
+}
+
+.rui-select__option-button--selected {
+  font-weight: 600;
+  background-color: rgb(226 232 240 / 0.7);
+}
+
+.rui-select__option-button--selected:hover {
+  background-color: rgb(226 232 240 / 0.95);
+}
+
+.rui-select__option-button--selected:is([data-theme="dark"] *) {
+  background-color: rgb(24 24 27 / 0.9);
+}
+
+.rui-select__option-button--selected:hover:is([data-theme="dark"] *) {
+  background-color: rgb(39 39 42 / 0.9);
+}
+
+.rui-select__option-content {
+  flex: 1 1 0%;
+  min-width: 0;
+  text-align: left;
+}
+
+.rui-select__option-label {
+  display: block;
+  min-width: 0;
+  font-weight: inherit;
+  color: rgb(15 23 42 / 1);
+}
+
+.rui-select__option-label:is([data-theme="dark"] *) {
+  color: rgb(244 244 245 / 1);
+}
+
+.rui-select__option-description {
+  display: block;
+  min-width: 0;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: inherit;
+  color: rgb(100 116 139 / 1);
+}
+
+.rui-select__option-description:is([data-theme="dark"] *) {
+  color: rgb(161 161 170 / 1);
+}
+
+.rui-select__option-check,
+.rui-select__option-check-placeholder {
+  margin-left: auto;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: 0 0 0.875rem;
+}
+
+.rui-select__option-check {
+  color: rgb(71 85 105 / 1);
+}
+
+.rui-select__option-check:is([data-theme="dark"] *) {
+  color: rgb(212 212 216 / 1);
+}
+
+.rui-select__option-check-placeholder {
+  display: inline-flex;
+}
+
+.rui-select__description {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(100 116 139 / 1);
+}
+
+.rui-select__description:is([data-theme="dark"] *) {
+  color: rgb(161 161 170 / 1);
+}
+
+.rui-select__error {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: rgb(244 63 94 / 1);
+}
+
+.rui-select__error:is([data-theme="dark"] *) {
+  color: rgb(251 113 133 / 1);
+}