@paroicms/react-ui 0.4.4 → 0.5.0

package/styles/InputText.css

@@ -0,0 +1,99 @@
+/* ========================================
+   InputText Component
+   ======================================== */
+.PaInputText {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &.error .PaInputText-field {
+    border-color: var(--color-danger);
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
+}
+
+.PaInputText-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaInputText-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaInputText-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);
+  }
+}
+
+.PaInputText-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}
+
+.PaInputText-row {
+  display: flex;
+  gap: var(--space-1);
+
+  .PaInputText-field {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.PaInputText-iconWrapper {
+  position: relative;
+  display: flex;
+
+  .PaInputText-field {
+    padding-left: var(--space-10);
+  }
+
+  &.iconRight .PaInputText-icon {
+    right: var(--space-3);
+    left: auto;
+  }
+
+  &.iconRight .PaInputText-field {
+    padding-right: var(--space-10);
+    padding-left: var(--space-3);
+  }
+}
+
+.PaInputText-icon {
+  position: absolute;
+  top: 50%;
+  left: var(--space-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  pointer-events: none;
+  transform: translateY(-50%);
+}

package/styles/MenuItem.css

@@ -0,0 +1,169 @@
+/* ========================================
+   MenuItem Component
+   ======================================== */
+.PaMenuItem {
+  display: flex;
+  align-items: stretch;
+
+  &.active {
+    background: var(--color-bg-subtle);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaMenuItem-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  padding: var(--space-1);
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+
+  &.toggle {
+    padding: var(--space-2) var(--space-3);
+
+    /* &:hover {
+      background: var(--color-bg-subtle);
+    } */
+  }
+}
+
+.PaMenuItem-label {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: var(--space-2);
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+
+  /* Only apply hover to clickable elements (a, button) */
+  /* &:is(a, button):hover {
+    background: var(--color-bg-subtle);
+  } */
+
+  /* Non-clickable span elements */
+  &:is(span) {
+    cursor: default;
+  }
+}
+
+.PaMenuItem-popup {
+  align-self: center;
+  margin-left: auto;
+}
+
+/* ========================================
+   MenuItem in Sidebar Context
+   ======================================== */
+.PaSidebar {
+  & .PaMenuItem {
+    padding: 0 var(--space-2);
+  }
+
+  /* Dark Sidebar */
+  &.dark .PaMenuItem {
+    color: var(--color-text-sidebar-muted);
+
+    & .PaMenuItem-label {
+      padding: var(--space-3) var(--space-2);
+
+      &:is(a, button):hover {
+        color: #fff;
+        background: var(--color-hover-sidebar-dark);
+      }
+    }
+
+    & .PaMenuItem-left.toggle:hover {
+      color: #fff;
+      background: var(--color-hover-sidebar-dark);
+    }
+
+    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
+      color: var(--color-text-sidebar);
+      background: var(--color-hover-sidebar-dark);
+      border-color: var(--color-hover-sidebar-dark);
+    } */
+
+    /* Active state - self-contained with explicit hover */
+    &.active {
+      color: var(--color-text-inverse);
+      background: var(--color-primary);
+
+      & .PaMenuItem-label:is(a, button):hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+      }
+
+      & .PaMenuItem-left.toggle:hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+      }
+
+      /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+      } */
+    }
+  }
+
+  /* Light Sidebar */
+  &.light .PaMenuItem {
+    color: var(--color-text-muted);
+
+    & .PaMenuItem-label {
+      padding: var(--space-3) var(--space-2);
+
+      &:is(a, button):hover {
+        color: var(--color-text);
+        background: var(--color-hover-sidebar-light);
+      }
+    }
+
+    & .PaMenuItem-left.toggle:hover {
+      color: var(--color-text);
+      background: var(--color-hover-sidebar-light);
+    }
+
+    /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
+      color: var(--color-text);
+      background: var(--color-hover-sidebar-light);
+      border-color: var(--color-hover-sidebar-light);
+    } */
+
+    /* Active state - self-contained with explicit hover */
+    &.active {
+      color: var(--color-text-inverse);
+      background: var(--color-primary);
+
+      & .PaMenuItem-label:is(a, button):hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+      }
+
+      & .PaMenuItem-left.toggle:hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+      }
+
+      /* & .PaMenuItem-popup .PaBtn.secondary.outlined:hover {
+        color: var(--color-text-inverse);
+        background: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+      } */
+    }
+  }
+}

package/styles/MultiSelect.css

@@ -0,0 +1,158 @@
+/* ========================================
+   MultiSelect Component
+   ======================================== */
+.PaMultiSelect {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &.error .PaMultiSelect-control {
+    border-color: var(--color-danger);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaMultiSelect-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaMultiSelect-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaMultiSelect-control {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  min-height: 38px;
+  padding: var(--space-1) var(--space-3);
+  cursor: pointer;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  transition: border-color var(--transition);
+
+  &:hover {
+    border-color: var(--color-primary);
+  }
+
+  &.open {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-light);
+  }
+}
+
+.PaMultiSelect-values {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.PaMultiSelect-placeholder {
+  font-size: var(--text-sm);
+  color: var(--color-text-light);
+}
+
+.PaMultiSelect-chip {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  background: var(--color-bg-subtle);
+  border-radius: var(--radius);
+}
+
+.PaMultiSelect-chipRemove {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--color-danger);
+  }
+}
+
+.PaMultiSelect-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.PaMultiSelect-dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  right: 0;
+  left: 0;
+  z-index: var(--z-dropdown);
+  max-height: 250px;
+  padding: var(--space-2);
+  overflow-y: auto;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.PaMultiSelect-option {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: background-color var(--transition);
+
+  &:hover {
+    background: var(--color-bg-subtle);
+  }
+
+  &.selected {
+    color: var(--color-primary-dark);
+    background: var(--color-primary-light);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaMultiSelect-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: var(--text-xs);
+  color: var(--color-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+
+  .PaMultiSelect-option.selected & {
+    color: var(--color-text-inverse);
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+}
+
+.PaMultiSelect-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/Panel.css

@@ -0,0 +1,40 @@
+/* ========================================
+   Panel Component
+   ======================================== */
+.PaPanel {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+}
+
+.PaPanel-header {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-4) var(--space-5);
+
+  &.collapsible {
+    cursor: pointer;
+    transition: background-color var(--transition);
+
+    &:hover {
+      background: var(--color-bg-subtle);
+    }
+  }
+}
+
+.PaPanel-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.PaPanel-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaPanel-content {
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--color-border-light);
+}

package/styles/PasswordInput.css

@@ -0,0 +1,80 @@
+/* ========================================
+   PasswordInput Component
+   ======================================== */
+.PaPasswordInput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaPasswordInput-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaPasswordInput-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaPasswordInput-inputWrapper {
+  position: relative;
+  display: flex;
+
+  &.error .PaPasswordInput-input {
+    border-color: var(--color-danger);
+  }
+}
+
+.PaPasswordInput-input {
+  flex: 1;
+  width: 100%;
+  padding: var(--space-2) var(--space-8) 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);
+  }
+}
+
+.PaPasswordInput-toggle {
+  position: absolute;
+  top: 50%;
+  right: var(--space-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  transform: translateY(-50%);
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--color-text);
+  }
+}
+
+.PaPasswordInput-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/PopupMenu.css

@@ -0,0 +1,37 @@
+/* ========================================
+   PopupMenu Component
+   ======================================== */
+.PaPopupMenu {
+  z-index: var(--z-popover);
+  min-width: 160px;
+  padding: var(--space-2);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.PaPopupMenu-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.PaPopupMenu-item {
+  cursor: pointer;
+  border-radius: var(--radius);
+  transition: background-color var(--transition);
+
+  /* &:hover {
+    background: var(--color-bg-subtle);
+  } */
+}
+
+.PaPopupMenu-submenu {
+  min-width: 160px;
+  padding: var(--space-2);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}

package/styles/RadioButton.css

@@ -0,0 +1,60 @@
+/* ========================================
+   RadioButton Component
+   ======================================== */
+.PaRadioButton {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.PaRadioButton-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-full);
+  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: 8px;
+    height: 8px;
+    content: "";
+    background: var(--color-text-inverse);
+    border-radius: var(--radius-full);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.PaRadioButton-label {
+  font-size: var(--text-sm);
+  color: var(--color-text);
+}

package/styles/Select.css

@@ -0,0 +1,72 @@
+/* ========================================
+   Select Component
+   ======================================== */
+.PaSelect {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+
+  &.error .PaSelect-field {
+    border-color: var(--color-danger);
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
+}
+
+.PaSelect-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.PaSelect-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text);
+}
+
+.PaSelect-fieldWrapper {
+  position: relative;
+}
+
+.PaSelect-field {
+  width: 100%;
+  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
+  font-family: inherit;
+  font-size: var(--text-base);
+  color: var(--color-text);
+  appearance: none;
+  cursor: pointer;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  transition: border-color 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);
+  }
+}
+
+.PaSelect-icon {
+  position: absolute;
+  top: 50%;
+  right: var(--space-3);
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-muted);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.PaSelect-error {
+  font-size: var(--text-xs);
+  color: var(--color-danger);
+}

package/styles/SideMenu.css

@@ -0,0 +1,7 @@
+/* ========================================
+   SideMenu Component
+   ======================================== */
+.PaSideMenu {
+  display: flex;
+  flex-direction: column;
+}