@lynx-js/genui 0.0.1-rc.0

package/a2ui/styles/catalog/Button.css

@@ -0,0 +1,83 @@
+@import "../theme.css";
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  gap: 10px;
+  padding: 10px 16px;
+  margin: 6px 0;
+  border: 1px solid var(--a2ui-color-border);
+  border-radius: 12px;
+  background: var(--a2ui-color-surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
+  color: var(--a2ui-color-on-surface);
+  font-weight: 600;
+  transition:
+    background-color 0.18s ease,
+    transform 0.18s ease,
+    opacity 0.18s ease,
+    box-shadow 0.18s ease,
+    border-color 0.18s ease;
+}
+
+.button.ui-active {
+  background-color: var(--a2ui-color-secondary-hover);
+  transform: translateY(1px);
+}
+
+.button-primary {
+  background-color: var(--a2ui-color-primary);
+  border-color: var(--a2ui-color-primary);
+  color: var(--a2ui-color-on-primary);
+  box-shadow:
+    0 10px 24px rgba(0, 85, 217, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.22) inset;
+}
+
+.button-borderless {
+  background: none;
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--a2ui-color-primary);
+}
+
+.button-disabled {
+  opacity: 0.55;
+}
+
+.button-disabled.ui-active {
+  background-color: inherit;
+  transform: none;
+}
+
+.button-invalid {
+  opacity: 0.45;
+}
+
+.button-error {
+  margin-top: -2px;
+  color: var(--a2ui-color-error, #d92d20);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.button-fallback {
+  color: inherit;
+  font-size: inherit;
+}
+
+.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/Card.css

@@ -0,0 +1,49 @@
+@import "../theme.css";
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+  gap: 18px;
+}
+
+/* Elevated (Default) */
+.card-elevated {
+  background-color: var(--a2ui-color-surface);
+  border: 1px solid var(--a2ui-color-border-strong);
+  border-radius: 18px;
+  box-shadow:
+    0 12px 30px var(--a2ui-color-overlay),
+    0 1px 0 rgba(255, 255, 255, 0.45) inset;
+  padding: 18px;
+}
+
+/* Outlined */
+.card-outlined {
+  background-color: var(--a2ui-color-background);
+  border: 1px solid var(--a2ui-color-border);
+  border-radius: 16px;
+  padding: 18px;
+}
+
+/* Filled */
+.card-filled {
+  background-color: var(--a2ui-color-surface);
+  border: 1px solid var(--a2ui-color-border-strong);
+  border-radius: 16px;
+  padding: 18px;
+}
+
+/* Ghost */
+.card-ghost {
+  background-color: transparent;
+  padding: 0;
+}
+
+.card-weighted {
+  width: auto;
+}

package/a2ui/styles/catalog/CheckBox.css

@@ -0,0 +1,46 @@
+@import "../theme.css";
+
+.checkbox-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+}
+
+.checkbox-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1.5px solid var(--a2ui-color-border);
+  background-color: var(--a2ui-color-surface);
+  color: var(--a2ui-color-on-primary);
+  flex-shrink: 0;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
+}
+
+.checkbox-input-checked {
+  border-color: var(--a2ui-color-primary);
+  background-color: var(--a2ui-color-on-primary);
+  color: var(--a2ui-color-primary);
+}
+
+.checkbox-row-invalid .checkbox-input {
+  border-color: var(--a2ui-color-error, #d92d20);
+}
+
+.checkbox-label {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--a2ui-color-on-background);
+}
+
+.checkbox-error {
+  color: var(--a2ui-color-error, #d92d20);
+  font-size: 10px;
+  line-height: 1.5;
+}

package/a2ui/styles/catalog/Column.css

@@ -0,0 +1,89 @@
+@import "../theme.css";
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: 100%;
+  min-width: 0;
+}
+
+.column-weighted-item {
+  min-height: 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 */
+
+/* Section: Large sections of content */
+.col-hint-section {
+  padding: 36px;
+  gap: 28px;
+}
+
+/* Group: Standard logical grouping */
+.col-hint-group {
+  gap: 18px;
+}
+
+/* Compact: Tighter grouping */
+.col-hint-compact {
+  gap: 10px;
+}
+
+/* Screen: Full screen container */
+.col-hint-screen {
+  width: 100%;
+  height: 100%;
+  background-color: var(--a2ui-color-background);
+}
+
+/* Root Column: Default root container */
+.col-hint-root-column {
+  width: 100%;
+  min-height: 100%;
+  padding: 20px;
+  gap: 18px;
+  background-color: var(--a2ui-color-background-ambient);
+}

package/a2ui/styles/catalog/Divider.css

@@ -0,0 +1,20 @@
+@import "../theme.css";
+
+.divider {
+  display: block;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--a2ui-color-border);
+  border: none;
+  opacity: 0.7;
+}
+
+.divider-horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.divider-vertical {
+  height: 100%;
+  width: 1px;
+}

package/a2ui/styles/catalog/Icon.css

@@ -0,0 +1,39 @@
+@import "../theme.css";
+
+.a2ui-icon {
+  font-family: var(--a2ui-icon-font-family);
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--a2ui-color-on-background);
+}
+
+.a2ui-icon-sm {
+  font-size: 14px;
+}
+
+.a2ui-icon-md {
+  font-size: 24px;
+}
+
+.a2ui-icon-lg {
+  font-size: 32px;
+}
+
+.a2ui-icon-color-primary {
+  color: var(--a2ui-icon-color-primary);
+}
+
+.a2ui-icon-color-muted {
+  color: var(--a2ui-icon-color-muted);
+}
+
+.a2ui-icon-color-inherit {
+  color: inherit;
+}

package/a2ui/styles/catalog/Image.css

@@ -0,0 +1,54 @@
+@import "../theme.css";
+
+.a2ui-image {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: var(--a2ui-color-surface-muted);
+  border: 1px solid var(--a2ui-color-border-strong);
+  box-shadow: 0 8px 24px var(--a2ui-color-overlay);
+}
+
+.image-weighted {
+  flex: 1 1 0;
+}
+
+.row-weighted-item .a2ui-image,
+.column-weighted-item .a2ui-image {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.image-variant-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.image-variant-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-shadow: 0 6px 16px var(--a2ui-color-overlay);
+}
+
+.image-variant-header {
+  width: 100%;
+  height: 200px;
+  border-radius: 18px;
+}
+
+.image-variant-smallFeature {
+  max-width: 120px;
+}
+
+.image-variant-mediumFeature {
+  max-width: 240px;
+}
+
+.image-variant-largeFeature {
+  max-height: 400px;
+}

package/a2ui/styles/catalog/LineChart.css

@@ -0,0 +1,116 @@
+@import "../theme.css";
+
+.line-chart {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+  box-sizing: border-box;
+  padding: 16px;
+  border: 1px solid var(--a2ui-color-border);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%),
+    var(--a2ui-color-surface);
+}
+
+.line-chart-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.line-chart-header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.line-chart-title {
+  color: var(--a2ui-color-on-surface);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.line-chart-caption,
+.line-chart-axis-label,
+.line-chart-scale-value,
+.line-chart-legend-label,
+.line-chart-axis-tick-label {
+  color: var(--a2ui-color-text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.line-chart-axis-label {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.line-chart-scale-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.line-chart-scale-value-right {
+  text-align: right;
+}
+
+.line-chart-svg {
+  display: block;
+  width: 100%;
+  min-height: 220px;
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.line-chart-axis-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.line-chart-axis-tick {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+
+.line-chart-axis-tick-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.line-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  align-items: center;
+}
+
+.line-chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.line-chart-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+.line-chart-legend-label {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/a2ui/styles/catalog/List.css

@@ -0,0 +1,38 @@
+@import "../theme.css";
+
+.list {
+  width: 100%;
+  height: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  padding: 0;
+}
+
+.list.list-horizontal {
+  flex-direction: row;
+  align-items: center;
+  overflow-x: auto;
+}
+
+.list.list-vertical {
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.list-align-start {
+  align-items: flex-start;
+}
+
+.list-align-center {
+  align-items: center;
+}
+
+.list-align-end {
+  align-items: flex-end;
+}
+
+.list-align-stretch {
+  align-items: stretch;
+}

package/a2ui/styles/catalog/Modal.css

@@ -0,0 +1,60 @@
+@import "../theme.css";
+
+.modal-trigger {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.modal-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.modal-backdrop {
+  background-color: rgba(15, 23, 42, 0.28);
+  transition: opacity 0.18s ease;
+}
+
+.modal-backdrop.ui-entering,
+.modal-backdrop.ui-open {
+  opacity: 1;
+}
+
+.modal-backdrop.ui-leaving,
+.modal-backdrop.ui-closed {
+  opacity: 0;
+}
+
+.modal-content {
+  width: 100%;
+  max-width: 560px;
+  max-height: 86%;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  border-radius: 22px;
+  border: 1px solid var(--a2ui-color-border-strong);
+  box-sizing: border-box;
+  overflow-y: auto;
+  background-color: var(--a2ui-color-surface-strong);
+  box-shadow: 0 16px 40px var(--a2ui-color-overlay);
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+
+.modal-content.ui-entering,
+.modal-content.ui-open {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.modal-content.ui-leaving,
+.modal-content.ui-closed {
+  opacity: 0;
+  transform: translateY(8px);
+}

package/a2ui/styles/catalog/PieChart.css

@@ -0,0 +1,109 @@
+@import "../theme.css";
+
+.pie-chart {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+  box-sizing: border-box;
+  padding: 16px;
+  border: 1px solid var(--a2ui-color-border);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 40%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
+    var(--a2ui-color-surface);
+}
+
+.pie-chart-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.pie-chart-header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.pie-chart-title {
+  color: var(--a2ui-color-on-surface);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.pie-chart-caption,
+.pie-chart-kpi-label,
+.pie-chart-legend-label,
+.pie-chart-legend-value {
+  color: var(--a2ui-color-text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.pie-chart-kpi {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.pie-chart-kpi-value {
+  color: var(--a2ui-color-on-surface);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.pie-chart-svg-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.pie-chart-svg {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.pie-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: flex-start;
+}
+
+.pie-chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.pie-chart-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+.pie-chart-legend-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.pie-chart-legend-label,
+.pie-chart-legend-value {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}