@stwd/react 0.1.0

package/dist/styles.css

@@ -0,0 +1,796 @@
+/* @stwd/react — Base Stylesheet
+ * All styles use CSS custom properties set by <StewardProvider>.
+ * Override any --stwd-* variable to customize.
+ */
+
+/* ─── Root ─── */
+.stwd-root {
+  font-family: var(--stwd-font, Inter, system-ui, sans-serif);
+  color: var(--stwd-text, #FAFAFA);
+  line-height: 1.5;
+}
+
+/* ─── Cards ─── */
+.stwd-card {
+  background: var(--stwd-surface, #1A1A2E);
+  border-radius: var(--stwd-radius, 12px);
+  padding: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+/* ─── Typography ─── */
+.stwd-heading {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem;
+  color: var(--stwd-text);
+}
+
+.stwd-subheading {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem;
+  color: var(--stwd-text);
+}
+
+.stwd-muted-text {
+  color: var(--stwd-muted, #6B7280);
+  font-size: 0.875rem;
+}
+
+/* ─── Badges ─── */
+.stwd-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.stwd-badge-success { color: var(--stwd-success, #10B981); background: rgba(16, 185, 129, 0.1); }
+.stwd-badge-error { color: var(--stwd-error, #EF4444); background: rgba(239, 68, 68, 0.1); }
+.stwd-badge-warning { color: var(--stwd-warning, #F59E0B); background: rgba(245, 158, 11, 0.1); }
+.stwd-badge-muted { color: var(--stwd-muted, #6B7280); background: rgba(107, 114, 128, 0.1); }
+
+/* ─── Buttons ─── */
+.stwd-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--stwd-radius, 12px);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s, background 0.15s;
+  font-family: inherit;
+}
+.stwd-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.stwd-btn-primary {
+  background: var(--stwd-primary, #8B5CF6);
+  color: #fff;
+}
+.stwd-btn-primary:hover:not(:disabled) { opacity: 0.9; }
+
+.stwd-btn-secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--stwd-text);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.stwd-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
+
+.stwd-btn-ghost {
+  background: transparent;
+  color: var(--stwd-muted);
+  padding: 0.25rem 0.5rem;
+}
+.stwd-btn-ghost:hover:not(:disabled) { color: var(--stwd-text); }
+
+.stwd-btn-success {
+  background: var(--stwd-success, #10B981);
+  color: #fff;
+}
+
+.stwd-btn-error {
+  background: var(--stwd-error, #EF4444);
+  color: #fff;
+}
+
+.stwd-btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+/* ─── Inputs ─── */
+.stwd-input,
+.stwd-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  color: var(--stwd-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.stwd-input:focus,
+.stwd-select:focus {
+  border-color: var(--stwd-primary, #8B5CF6);
+}
+.stwd-input:disabled,
+.stwd-select:disabled {
+  opacity: 0.5;
+}
+.stwd-input-sm {
+  width: 5rem;
+}
+
+/* ─── Toggle Switch ─── */
+.stwd-toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.stwd-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.stwd-toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.stwd-toggle-slider::before {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.stwd-toggle input:checked + .stwd-toggle-slider {
+  background: var(--stwd-primary, #8B5CF6);
+}
+.stwd-toggle input:checked + .stwd-toggle-slider::before {
+  transform: translateX(20px);
+}
+.stwd-toggle input:disabled + .stwd-toggle-slider {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ─── Links ─── */
+.stwd-link {
+  color: var(--stwd-accent, #A78BFA);
+  text-decoration: none;
+  font-size: 0.875rem;
+}
+.stwd-link:hover { text-decoration: underline; }
+
+/* ─── Loading / Empty / Error ─── */
+.stwd-loading {
+  text-align: center;
+  padding: 2rem;
+  color: var(--stwd-muted);
+}
+
+.stwd-empty-state {
+  text-align: center;
+  padding: 2rem;
+}
+.stwd-empty-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+.stwd-empty-text {
+  color: var(--stwd-muted);
+  font-size: 0.875rem;
+}
+
+.stwd-error-text {
+  color: var(--stwd-error, #EF4444);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+/* ─── Wallet Overview ─── */
+.stwd-wallet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.stwd-wallet-addresses {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.stwd-address-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stwd-chain-badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--stwd-accent);
+}
+
+.stwd-address {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.8125rem;
+  color: var(--stwd-text);
+}
+
+.stwd-address-full {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.75rem;
+  word-break: break-all;
+  color: var(--stwd-text);
+}
+
+.stwd-wallet-balance {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  margin-bottom: 1rem;
+}
+
+.stwd-balance-label {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
+.stwd-balance-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.stwd-balance-chain {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+  margin-top: 0.25rem;
+}
+
+.stwd-wallet-qr {
+  margin-top: 1rem;
+}
+
+.stwd-qr-placeholder {
+  padding: 1rem;
+  border: 1px dashed rgba(255, 255, 255, 0.15);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  text-align: center;
+}
+
+.stwd-qr-label {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+/* ─── Transaction History ─── */
+.stwd-tx-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.stwd-tx-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+.stwd-tx-row:last-child { border-bottom: none; }
+
+.stwd-tx-clickable {
+  cursor: pointer;
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  padding: 0.625rem;
+}
+.stwd-tx-clickable:hover { background: rgba(255, 255, 255, 0.03); }
+
+.stwd-tx-main {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.stwd-tx-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.stwd-tx-time {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+}
+
+.stwd-tx-policies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  width: 100%;
+  margin-top: 0.25rem;
+}
+
+.stwd-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stwd-page-info {
+  font-size: 0.875rem;
+  color: var(--stwd-muted);
+}
+
+/* ─── Policy Controls ─── */
+.stwd-policy-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.stwd-policy-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.stwd-policy-item {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stwd-policy-item.stwd-enforced {
+  opacity: 0.7;
+}
+
+.stwd-policy-item-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.stwd-policy-info {
+  flex: 1;
+}
+
+.stwd-policy-name {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.stwd-lock-icon {
+  font-size: 0.875rem;
+}
+
+.stwd-policy-desc {
+  font-size: 0.8125rem;
+  color: var(--stwd-muted);
+  margin-top: 0.25rem;
+}
+
+.stwd-policy-config {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stwd-enforced-label {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+  margin-top: 0.5rem;
+  font-style: italic;
+}
+
+.stwd-config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.stwd-config-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.stwd-config-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.stwd-config-field label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--stwd-muted);
+}
+
+.stwd-policy-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Address List */
+.stwd-address-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.stwd-address-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+}
+
+.stwd-address-add {
+  display: flex;
+  gap: 0.5rem;
+}
+.stwd-address-add .stwd-input {
+  flex: 1;
+}
+
+/* Time Window */
+.stwd-time-range {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stwd-day-picker {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.stwd-day-btn {
+  padding: 0.375rem 0.625rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--stwd-muted);
+  font-size: 0.75rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.stwd-day-btn.stwd-day-active {
+  background: var(--stwd-primary, #8B5CF6);
+  color: #fff;
+  border-color: var(--stwd-primary);
+}
+.stwd-day-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Chain Checklist */
+.stwd-chain-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.stwd-chain-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.stwd-chain-option input { cursor: pointer; }
+
+.stwd-chain-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.stwd-chain-symbol {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+}
+
+/* ─── Approval Queue ─── */
+.stwd-approval-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.stwd-approval-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.stwd-approval-item {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stwd-approval-main {
+  margin-bottom: 0.5rem;
+}
+
+.stwd-approval-to code {
+  font-size: 0.8125rem;
+}
+
+.stwd-approval-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0.25rem 0;
+}
+
+.stwd-approval-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stwd-approval-time {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+}
+
+.stwd-approval-reasons {
+  margin: 0.5rem 0;
+}
+
+.stwd-approval-reasons-label {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+  margin-bottom: 0.25rem;
+}
+
+.stwd-approval-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+/* ─── Spend Dashboard ─── */
+.stwd-spend-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.stwd-spend-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.stwd-stat-card {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+}
+
+.stwd-stat-label {
+  font-size: 0.75rem;
+  color: var(--stwd-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
+.stwd-stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+/* Budget Bars */
+.stwd-budget-section {
+  margin-bottom: 1rem;
+}
+
+.stwd-budget-bar-group {
+  margin-bottom: 0.75rem;
+}
+
+.stwd-budget-bar-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8125rem;
+  margin-bottom: 0.25rem;
+}
+
+.stwd-budget-bar-track {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.stwd-budget-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.stwd-budget-bar-detail {
+  font-size: 0.6875rem;
+  color: var(--stwd-muted);
+  margin-top: 0.125rem;
+}
+
+/* Bar Chart */
+.stwd-chart-section {
+  margin-bottom: 1rem;
+}
+
+.stwd-bar-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 120px;
+  padding-bottom: 1.25rem;
+}
+
+.stwd-bar-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  position: relative;
+}
+
+.stwd-bar {
+  width: 100%;
+  max-width: 24px;
+  background: var(--stwd-primary, #8B5CF6);
+  border-radius: 2px 2px 0 0;
+  transition: height 0.3s ease;
+}
+
+.stwd-bar-col .stwd-bar-label {
+  position: absolute;
+  bottom: -1.25rem;
+  font-size: 0.5625rem;
+  color: var(--stwd-muted);
+  white-space: nowrap;
+}
+
+/* Top Destinations */
+.stwd-destinations-section {
+  margin-bottom: 0.5rem;
+}
+
+.stwd-destination-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.stwd-destination-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.stwd-destination-amount {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-left: auto;
+}
+
+/* ─── Modal ─── */
+.stwd-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.stwd-modal {
+  background: var(--stwd-surface, #1A1A2E);
+  border-radius: var(--stwd-radius, 12px);
+  padding: 1.5rem;
+  max-width: 480px;
+  width: calc(100% - 2rem);
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.stwd-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+/* Template Cards */
+.stwd-template-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.stwd-template-card {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: calc(var(--stwd-radius, 12px) / 2);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stwd-template-name {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.stwd-template-desc {
+  font-size: 0.8125rem;
+  color: var(--stwd-muted);
+  margin-bottom: 0.5rem;
+}