@paroicms/react-ui 0.4.4 → 0.5.0

package/styles/Button.css

@@ -0,0 +1,167 @@
+/* ========================================
+   Buttons
+   ======================================== */
+.PaBtn {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-4);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--radius);
+  transition: all var(--transition);
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Primary button */
+  &.primary {
+    color: var(--color-text-inverse);
+    background: var(--color-primary);
+
+    &:hover {
+      background: var(--color-primary-hover);
+    }
+
+    &:active {
+      background: var(--color-primary-dark);
+    }
+  }
+
+  /* Secondary button (outline) */
+  &.secondary {
+    color: var(--color-text-muted);
+    background: transparent;
+    border: 1px solid var(--color-border);
+
+    &:hover {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+      border-color: var(--color-text-muted);
+    }
+
+    &.borderless,
+    &.borderless:hover {
+      border: none;
+    }
+  }
+
+  /* Ghost button (transparent) */
+  &.ghost {
+    color: var(--color-text-muted);
+    background: transparent;
+
+    &:hover {
+      color: var(--color-text);
+      background: var(--color-bg-subtle);
+    }
+  }
+
+  /* Danger button */
+  &.danger {
+    color: var(--color-text-inverse);
+    background: var(--color-danger);
+
+    &:hover {
+      background: var(--color-danger-dark);
+    }
+  }
+
+  /* Warning button */
+  &.warning {
+    color: var(--color-yellow);
+    background: transparent;
+    border: 2px solid var(--color-yellow);
+
+    &:hover {
+      background: var(--color-yellow-light);
+    }
+  }
+
+  /* Icon-only button */
+  &.icon {
+    aspect-ratio: 1;
+    padding: var(--space-2);
+  }
+
+  /* Size variations */
+  &.small {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+  }
+
+  &.large {
+    padding: var(--space-3) var(--space-6);
+    font-size: var(--text-base);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(40%);
+  }
+
+  /* Outlined variant */
+  &.outlined {
+    background-color: transparent;
+    border: 1px solid currentColor;
+  }
+
+  &.danger.outlined {
+    color: var(--color-danger);
+
+    &:hover {
+      background: var(--color-danger-light);
+    }
+  }
+
+  &.primary.outlined {
+    color: var(--color-primary);
+
+    &:hover {
+      background: var(--color-primary-light);
+    }
+  }
+}
+
+._coloredBg .PaBtn {
+  border-color: #fff;
+}
+
+/* Button icon */
+.PaBtn-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Async button spinner */
+.PaBtn-spinner {
+  animation: paBtn-spin 1s linear infinite;
+}
+
+.PaBtn-feedbackIcon {
+  flex-shrink: 0;
+}
+
+@keyframes paBtn-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/styles/Card.css

@@ -0,0 +1,28 @@
+/* ========================================
+   Cards
+   ======================================== */
+.PaCard {
+  padding: var(--space-5);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+}
+
+.PaCard-header {
+  padding-bottom: var(--space-4);
+  margin-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.PaCard-title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+}
+
+.PaCard-subtitle {
+  margin-top: var(--space-1);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}

package/styles/Checkbox.css

@@ -0,0 +1,61 @@
+/* ========================================
+   Checkbox Component
+   ======================================== */
+.PaCheckbox {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.PaCheckbox-input {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  appearance: none;
+  cursor: pointer;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition);
+
+  &:hover {
+    border-color: var(--color-primary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+  }
+
+  &:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+
+  &:checked::after {
+    display: block;
+    width: 5px;
+    height: 9px;
+    content: "";
+    border: solid var(--color-text-inverse);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaCheckbox-label {
+  font-size: var(--text-sm);
+  color: var(--color-text);
+}

package/styles/Chip.css

@@ -0,0 +1,35 @@
+/* ========================================
+   Chip Component
+   ======================================== */
+.PaChip {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+.PaChip-label {
+  color: var(--color-text);
+}
+
+.PaChip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-full);
+  transition: all var(--transition);
+
+  &:hover {
+    color: var(--color-danger);
+    background: var(--color-danger-light);
+  }
+}

package/styles/DataTable.css

@@ -0,0 +1,176 @@
+/* ========================================
+   Data Table
+   ======================================== */
+.PaDataTable {
+  width: 100%;
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+}
+
+.PaDataTable-header {
+  background: var(--color-bg-subtle);
+}
+
+.PaDataTable-headerCell {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-muted);
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.PaDataTable-headerCell.sortable {
+  cursor: pointer;
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--color-text);
+  }
+}
+
+.PaDataTable-row {
+  transition: background-color var(--transition);
+
+  &:not(:last-child) .PaDataTable-cell {
+    border-bottom: 1px solid var(--color-border-light);
+  }
+
+  &.clickable {
+    cursor: pointer;
+    &:hover {
+      background: var(--color-primary-light);
+    }
+  }
+
+  &.unselectable {
+    cursor: not-allowed;
+
+    &,
+    &:hover {
+      background-color: var(--color-bg-muted);
+    }
+
+    & .PaDataTable-cell {
+      color: var(--color-text-muted);
+    }
+  }
+}
+
+.PaDataTable-cell {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  vertical-align: middle;
+  color: var(--color-text);
+}
+
+.PaDataTable-cell.actions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* DataTable Wrapper & Loading */
+.PaDataTable-wrapper {
+  position: relative;
+
+  &.loading {
+    min-height: 100px;
+  }
+}
+
+.PaDataTable-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.PaDataTable-emptyCell {
+  padding: var(--space-8) var(--space-4);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.PaDataTable.small {
+  .PaDataTable-headerCell,
+  .PaDataTable-cell {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+  }
+}
+
+/* DataTable Header Content */
+.PaDataTable-headerContent {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.PaDataTable-sortIcon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* DataTable Scrollable */
+.PaDataTable-scrollable {
+  overflow-x: auto;
+}
+
+/* DataTable Footer */
+.PaDataTable-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--color-border);
+}
+
+.PaDataTable-totalCount {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+/* DataTable Pagination */
+.PaDataTable-pagination {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.PaDataTable-paginationBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1) var(--space-2);
+  cursor: pointer;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+
+  &:hover:not(:disabled) {
+    background: var(--color-bg-subtle);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaDataTable-paginationText {
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+.PaDataTable-rowsPerPage {
+  margin-left: var(--space-2);
+}

package/styles/DateInput.css

@@ -0,0 +1,59 @@
+/* ========================================
+   DateInput Component
+   ======================================== */
+.PaDateInput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaDateInput-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaDateInput-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaDateInput-field {
+  padding: var(--space-2) var(--space-3);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  transition:
+    border-color var(--transition),
+    box-shadow var(--transition);
+
+  &:hover {
+    border-color: var(--color-primary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
+
+  &.error {
+    border-color: var(--color-danger);
+  }
+}
+
+.PaDateInput-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/Dialog.css

@@ -0,0 +1,77 @@
+/* ========================================
+   Dialog Component
+   ======================================== */
+.PaDialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.PaDialog-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.PaDialog {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+  max-width: 90vw;
+  max-height: 90vh;
+  background: var(--color-bg-elevated);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+.PaDialog-header {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.PaDialog-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+}
+
+.PaDialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius);
+  transition: all var(--transition);
+
+  &:hover {
+    color: var(--color-text);
+    background: var(--color-bg-subtle);
+  }
+}
+
+.PaDialog-content {
+  flex: 1;
+  padding: var(--space-5);
+  overflow-y: auto;
+}
+
+.PaDialog-footer {
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--color-border-light);
+}

package/styles/Inplace.css

@@ -0,0 +1,44 @@
+/* ========================================
+   Inplace Component
+   ======================================== */
+.PaInplace {
+  &.display {
+    padding: var(--space-2);
+    cursor: pointer;
+    border: 1px dashed transparent;
+    border-radius: var(--radius);
+    transition: all var(--transition);
+
+    &:hover {
+      background: var(--color-bg-subtle);
+      border-color: var(--color-border);
+    }
+  }
+
+  &.active {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+}
+
+.PaInplace-content {
+  flex: 1;
+}
+
+.PaInplace-close {
+  align-self: flex-end;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  transition: all var(--transition);
+
+  &:hover {
+    color: var(--color-text);
+    background: var(--color-bg-subtle);
+  }
+}

package/styles/InputNumber.css

@@ -0,0 +1,60 @@
+/* ========================================
+   InputNumber Component
+   ======================================== */
+.PaInputNumber {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaInputNumber-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaInputNumber-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaInputNumber-field {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  transition:
+    border-color var(--transition),
+    box-shadow var(--transition);
+
+  &:hover {
+    border-color: var(--color-primary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--color-bg-subtle);
+    opacity: 0.7;
+  }
+
+  &.error {
+    border-color: var(--color-danger);
+  }
+}
+
+.PaInputNumber-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}