@lynx-js/genui 0.0.1-rc.0

package/a2ui/styles/catalog/RadioGroup.css

@@ -0,0 +1,123 @@
+@import "../theme.css";
+
+/* =========================
+ * Radio Group
+ * ========================= */
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.radio-group-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Usage Hints */
+
+/* Default: Standard vertical list */
+.radio-group-default .radio-group-container {
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Row: Horizontal layout */
+.radio-group-row .radio-group-container {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 18px;
+  align-items: center;
+}
+
+/* Card: Options look like cards */
+.radio-group-card .radio-option {
+  padding: 14px 16px;
+  border: 1px solid var(--a2ui-color-border);
+  border-radius: 14px;
+  background-color: var(--a2ui-color-surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
+}
+
+.radio-group-card .radio-option:active {
+  background-color: var(--a2ui-color-surface-muted);
+}
+
+.radio-group-invalid .radio-item {
+  border-color: var(--a2ui-color-error, #d92d20);
+}
+
+.radio-group-error {
+  margin-top: 2px;
+  color: var(--a2ui-color-error, #d92d20);
+  font-size: 10px;
+  line-height: 1.5;
+}
+
+/* =========================
+ * Radio Option
+ * ========================= */
+
+.radio-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.label {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.5;
+}
+
+/* =========================
+ * Radio Item
+ * ========================= */
+
+.radio-item {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1.5px solid var(--a2ui-color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-shrink: 0;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
+}
+
+.radio-item.ui-disabled {
+  opacity: 0.5;
+}
+
+.radio-item.ui-checked {
+  border-color: var(--a2ui-color-primary);
+  background-color: var(--a2ui-color-primary);
+}
+
+.radio-item.ui-active {
+  border-color: var(--a2ui-color-primary-hover);
+}
+
+/* Indicator Dot */
+.radio-indicator {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.radio-indicator-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: var(--a2ui-color-on-primary);
+}

package/a2ui/styles/catalog/Row.css

@@ -0,0 +1,83 @@
+@import "../theme.css";
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 18px;
+  width: 100%;
+  min-width: 0;
+}
+
+.row-weighted-item {
+  min-width: 0;
+}
+
+/* Alignment */
+.alignment-start {
+  align-items: flex-start;
+}
+
+.alignment-center {
+  align-items: center;
+}
+
+.alignment-end {
+  align-items: flex-end;
+}
+
+.alignment-stretch {
+  align-items: stretch;
+}
+
+/* Distribution */
+.distribution-start {
+  justify-content: flex-start;
+}
+
+.distribution-center {
+  justify-content: center;
+}
+
+.distribution-end {
+  justify-content: flex-end;
+}
+
+.distribution-spaceBetween {
+  justify-content: space-between;
+}
+
+.distribution-spaceAround {
+  justify-content: space-around;
+}
+
+.distribution-spaceEvenly {
+  justify-content: space-evenly;
+}
+
+/* Usage Hints */
+
+/* Group: Standard horizontal grouping */
+.row-hint-group {
+  gap: 18px;
+}
+
+/* Compact: Tight grouping (e.g., icon + text) */
+.row-hint-compact {
+  gap: 10px;
+}
+
+/* Balanced: Good for space-between layouts */
+.row-hint-balanced {
+  width: 100%;
+}
+
+/* Toolbar: Specific for action bars */
+.row-hint-toolbar {
+  width: 100%;
+  height: 60px;
+  padding: 0 20px;
+  align-items: center;
+  background-color: var(--a2ui-color-surface);
+  border-bottom: 1px solid var(--a2ui-color-border);
+}

package/a2ui/styles/catalog/Slider.css

@@ -0,0 +1,96 @@
+@import "../theme.css";
+
+.slider {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+.slider-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.slider-label {
+  min-width: 0;
+  color: var(--a2ui-color-text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.slider-value {
+  flex-shrink: 0;
+  color: var(--a2ui-color-text-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.slider-control {
+  margin-left: 14px;
+  margin-right: 14px;
+}
+
+.slider-root {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
+
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background-color: var(--a2ui-color-surface-muted);
+}
+
+.slider-indicator {
+  height: 100%;
+  border-radius: 999px;
+  background-color: var(--a2ui-color-primary);
+}
+
+.slider-thumb {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slider-thumb-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--a2ui-color-primary);
+  background-color: var(--a2ui-color-surface-strong);
+  box-shadow:
+    0 8px 18px rgba(0, 85, 217, 0.14),
+    0 1px 0 rgba(255, 255, 255, 0.5) inset;
+}
+
+.slider-invalid .slider-track {
+  background-color: var(--a2ui-color-input-error-bg);
+}
+
+.slider-invalid .slider-indicator,
+.slider-invalid .slider-thumb-dot {
+  border-color: var(--a2ui-color-input-error);
+  background-color: var(--a2ui-color-input-error);
+}
+
+.slider-error {
+  color: var(--a2ui-color-input-error);
+  font-size: 11px;
+  line-height: 1.5;
+}

package/a2ui/styles/catalog/Tabs.css

@@ -0,0 +1,46 @@
+@import "../theme.css";
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.tabs-headers {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  padding: 0 2px 2px;
+}
+
+.tabs-header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  padding: 8px 2px 10px;
+  background-color: transparent;
+  color: var(--a2ui-color-on-surface);
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-weight: 600;
+  flex: 0 0 auto;
+  transition: color 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
+}
+
+.tabs-header-active {
+  color: var(--a2ui-color-on-secondary);
+  border-bottom-color: var(--a2ui-color-primary);
+}
+
+.tabs-header-text {
+  color: inherit;
+}
+
+.tabs-content {
+  padding: 0 2px;
+  min-width: 0;
+}

package/a2ui/styles/catalog/Text.css

@@ -0,0 +1,121 @@
+@import "../theme.css";
+
+.text-body,
+.text-caption,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-price,
+.text-link,
+.text-label {
+  flex-shrink: 0;
+}
+
+.text-h1 {
+  font-size: 28px;
+  font-weight: bold;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.15;
+  flex-shrink: 0;
+}
+
+.text-h2 {
+  font-size: 22px;
+  font-weight: bold;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.text-h3 {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.text-h4 {
+  font-size: 15px;
+  font-weight: bold;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.text-h5 {
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.2;
+  flex-shrink: 0;
+}
+
+.text-caption {
+  font-size: 11px;
+  color: var(--a2ui-color-text-muted);
+  line-height: 1.5;
+  flex-shrink: 0;
+}
+
+.text-body {
+  font-size: 15px;
+  font-weight: normal;
+  color: var(--a2ui-color-on-surface);
+  line-height: 1.5;
+}
+
+.text-weight-1 {
+  font-weight: 500;
+}
+
+.text-weight-1-5 {
+  font-weight: 600;
+}
+
+.text-weight-2 {
+  font-weight: 700;
+}
+
+/* New Usage Hints */
+
+.text-price {
+  flex-shrink: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--a2ui-color-primary);
+  line-height: 1.5;
+}
+
+.text-link {
+  flex-shrink: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--a2ui-color-primary-hover);
+  text-decoration: underline;
+  line-height: 1.5;
+}
+
+.text-label {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: bold;
+  color: var(--a2ui-color-text-muted);
+  letter-spacing: 0.8px;
+  line-height: 1.5;
+}
+
+.button .text-body,
+.button .text-caption,
+.button .text-h1,
+.button .text-h2,
+.button .text-h3,
+.button .text-h4,
+.button .text-h5,
+.button .text-price,
+.button .text-link,
+.button .text-label {
+  color: inherit;
+}

package/a2ui/styles/catalog/TextField.css

@@ -0,0 +1,48 @@
+@import "../theme.css";
+
+.textfield {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+}
+
+.textfield-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--a2ui-color-text-muted);
+  line-height: 1.5;
+}
+
+.textfield-control {
+  width: 100%;
+  min-height: 44px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--a2ui-color-border-strong);
+  border-radius: 12px;
+  background-color: var(--a2ui-color-surface-strong);
+  color: var(--a2ui-color-on-input);
+  font-size: 15px;
+  line-height: 1.5;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
+}
+
+.textfield-textarea {
+  min-height: 112px;
+}
+
+.textfield-invalid .textfield-control {
+  border-color: var(--a2ui-color-input-error);
+}
+
+.textfield-error {
+  font-size: 11px;
+  color: var(--a2ui-color-input-error);
+  line-height: 1.5;
+}