@xeplr/ui-account 1.0.0

package/src/designs/admin.css

@@ -0,0 +1,525 @@
+@import './theme.css';
+
+/* ─── xeplr Admin Matrix ─── */
+
+.xeplr-admin-container {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 20px;
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 8px;
+  background: var(--xeplr-bg-primary);
+  color: var(--xeplr-text-primary);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+}
+
+.xeplr-admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.xeplr-admin-header h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+/* ─── Toolbar ─── */
+
+.xeplr-admin-toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.xeplr-admin-search {
+  flex: 1;
+  min-width: 200px;
+  padding: 8px 12px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-input-bg);
+  color: var(--xeplr-input-text);
+  font-size: 14px;
+}
+
+.xeplr-admin-search:focus {
+  outline: none;
+  border-color: var(--xeplr-border-focus);
+}
+
+.xeplr-admin-search::placeholder {
+  color: var(--xeplr-input-placeholder);
+}
+
+.xeplr-admin-select {
+  padding: 8px 12px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-input-bg);
+  color: var(--xeplr-input-text);
+  font-size: 14px;
+}
+
+.xeplr-admin-select:focus {
+  outline: none;
+  border-color: var(--xeplr-border-focus);
+}
+
+.xeplr-admin-btn-secondary {
+  padding: 8px 16px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-bg-tertiary);
+  color: var(--xeplr-text-primary);
+  cursor: pointer;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.xeplr-admin-btn-secondary:hover {
+  background: var(--xeplr-bg-hover);
+  border-color: var(--xeplr-text-muted);
+}
+
+/* ─── Tabs ─── */
+
+.xeplr-admin-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 16px;
+  border-bottom: 2px solid var(--xeplr-border-primary);
+}
+
+.xeplr-admin-tab {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  color: var(--xeplr-text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.xeplr-admin-tab:hover {
+  color: var(--xeplr-text-secondary);
+}
+
+.xeplr-admin-tab-active {
+  color: var(--xeplr-accent);
+  border-bottom-color: var(--xeplr-accent);
+}
+
+.xeplr-admin-tab-badge {
+  margin-left: 6px;
+  font-size: 11px;
+  background: var(--xeplr-badge-bg);
+  color: var(--xeplr-badge-text);
+  padding: 1px 7px;
+  border-radius: 10px;
+}
+
+/* ─── Sub-tabs (for uncategorized) ─── */
+
+.xeplr-admin-subtabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.xeplr-admin-subtab {
+  padding: 6px 14px;
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 4px;
+  background: var(--xeplr-bg-secondary);
+  color: var(--xeplr-text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+
+.xeplr-admin-subtab:hover {
+  color: var(--xeplr-text-secondary);
+  border-color: var(--xeplr-input-border);
+}
+
+.xeplr-admin-subtab-active {
+  background: var(--xeplr-bg-active);
+  color: var(--xeplr-accent);
+  border-color: var(--xeplr-accent);
+}
+
+.xeplr-admin-subtab-count {
+  margin-left: 5px;
+  font-size: 11px;
+  color: var(--xeplr-text-disabled);
+}
+
+/* ─── Matrix Table ─── */
+
+.xeplr-admin-matrix-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 6px;
+}
+
+.xeplr-admin-matrix {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+}
+
+.xeplr-admin-matrix thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.xeplr-admin-matrix th {
+  padding: 10px 14px;
+  background: var(--xeplr-bg-secondary);
+  border-bottom: 2px solid var(--xeplr-border-primary);
+  text-align: center;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--xeplr-text-secondary);
+}
+
+.xeplr-admin-matrix td {
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--xeplr-border-secondary);
+}
+
+.xeplr-admin-matrix tbody tr:hover {
+  background: var(--xeplr-bg-hover);
+}
+
+.xeplr-admin-matrix tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Sticky first column */
+.xeplr-admin-sticky-col {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--xeplr-bg-primary);
+  text-align: left !important;
+  min-width: 200px;
+}
+
+.xeplr-admin-matrix thead .xeplr-admin-sticky-col {
+  background: var(--xeplr-bg-secondary);
+  z-index: 3;
+}
+
+.xeplr-admin-matrix tbody tr:hover .xeplr-admin-sticky-col {
+  background: var(--xeplr-bg-hover);
+}
+
+.xeplr-admin-role-header {
+  min-width: 100px;
+}
+
+/* ─── Module View ─── */
+
+.xeplr-admin-module-col {
+  min-width: 180px;
+}
+
+.xeplr-admin-action-col {
+  min-width: 120px;
+  text-align: left !important;
+}
+
+.xeplr-admin-module-name {
+  font-weight: 600;
+  font-size: 15px;
+  text-transform: capitalize;
+  vertical-align: top;
+  padding-top: 12px !important;
+  border-right: 1px solid var(--xeplr-border-secondary);
+}
+
+.xeplr-admin-module-first-row td {
+  border-top: 2px solid var(--xeplr-border-primary);
+}
+
+.xeplr-admin-action-cell {
+  font-size: 13px;
+  font-weight: 500;
+  padding-left: 16px !important;
+}
+
+.xeplr-admin-action-view { color: var(--xeplr-info); }
+.xeplr-admin-action-edit { color: var(--xeplr-success); }
+.xeplr-admin-action-delete { color: var(--xeplr-danger); }
+
+/* User cell */
+.xeplr-admin-user-cell {
+  line-height: 1.3;
+}
+
+.xeplr-admin-user-name {
+  font-weight: 500;
+}
+
+.xeplr-admin-user-email {
+  font-size: 12px;
+  color: var(--xeplr-text-muted);
+}
+
+.xeplr-admin-item-name {
+  font-weight: 500;
+}
+
+/* ─── Checkbox Toggle ─── */
+
+.xeplr-admin-cell {
+  text-align: center;
+}
+
+.xeplr-admin-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.xeplr-admin-toggle input[type="checkbox"] {
+  display: none;
+}
+
+.xeplr-admin-checkmark {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-input-bg);
+  position: relative;
+  transition: all 0.15s;
+}
+
+.xeplr-admin-toggle input:checked + .xeplr-admin-checkmark {
+  background: var(--xeplr-accent);
+  border-color: var(--xeplr-accent);
+}
+
+.xeplr-admin-toggle input:checked + .xeplr-admin-checkmark::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 6px;
+  height: 11px;
+  border: solid var(--xeplr-accent-text);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.xeplr-admin-checkmark:hover {
+  border-color: var(--xeplr-accent);
+}
+
+/* Partial state (indeterminate) — dash instead of check */
+.xeplr-admin-partial {
+  background: var(--xeplr-accent-muted);
+  border-color: var(--xeplr-accent);
+}
+
+.xeplr-admin-partial::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 7px;
+  width: 10px;
+  height: 2px;
+  background: var(--xeplr-accent-text);
+}
+
+.xeplr-admin-saving {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ─── Master Settings ─── */
+
+.xeplr-admin-btn-primary {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background: var(--xeplr-accent);
+  color: var(--xeplr-accent-text);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.xeplr-admin-btn-primary:hover {
+  background: var(--xeplr-accent-hover);
+}
+
+.xeplr-admin-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.xeplr-admin-master-table th {
+  text-align: left !important;
+}
+
+.xeplr-admin-actions-col {
+  width: 90px;
+  text-align: center !important;
+}
+
+.xeplr-admin-action-btns {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+}
+
+.xeplr-admin-btn-edit,
+.xeplr-admin-btn-delete,
+.xeplr-admin-btn-save,
+.xeplr-admin-btn-cancel {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-bg-tertiary);
+  color: var(--xeplr-text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.xeplr-admin-btn-edit:hover { background: var(--xeplr-bg-active); color: var(--xeplr-accent); border-color: var(--xeplr-accent); }
+.xeplr-admin-btn-delete:hover { background: var(--xeplr-danger-bg); color: var(--xeplr-danger); border-color: var(--xeplr-danger); }
+.xeplr-admin-btn-save { background: var(--xeplr-success-bg); color: var(--xeplr-success); border-color: var(--xeplr-success-border); }
+.xeplr-admin-btn-save:hover { opacity: 0.9; }
+.xeplr-admin-btn-cancel:hover { background: var(--xeplr-bg-hover); }
+
+.xeplr-admin-btn-edit:disabled,
+.xeplr-admin-btn-delete:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.xeplr-admin-editing-row {
+  background: var(--xeplr-bg-active) !important;
+}
+
+.xeplr-admin-editing-row .xeplr-admin-sticky-col {
+  background: var(--xeplr-bg-active) !important;
+}
+
+.xeplr-admin-inline-input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  background: var(--xeplr-input-bg);
+  color: var(--xeplr-input-text);
+  font-size: 13px;
+}
+
+.xeplr-admin-inline-input:focus {
+  outline: none;
+  border-color: var(--xeplr-border-focus);
+}
+
+.xeplr-admin-inline-input::placeholder {
+  color: var(--xeplr-input-placeholder);
+}
+
+.xeplr-admin-group-input {
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.xeplr-admin-group-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--xeplr-tag-bg);
+  border: 1px solid var(--xeplr-tag-border);
+  border-radius: 3px;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--xeplr-tag-text);
+}
+
+.xeplr-admin-badge-yes {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--xeplr-success-bg);
+  border-radius: 3px;
+  font-size: 12px;
+  color: var(--xeplr-success);
+}
+
+.xeplr-admin-badge-no {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--xeplr-badge-bg);
+  border-radius: 3px;
+  font-size: 12px;
+  color: var(--xeplr-badge-text);
+}
+
+/* ─── States ─── */
+
+.xeplr-admin-loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--xeplr-text-muted);
+}
+
+.xeplr-admin-empty {
+  text-align: center;
+  padding: 30px;
+  color: var(--xeplr-text-disabled);
+  font-style: italic;
+}
+
+.xeplr-admin-empty-box {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--xeplr-text-disabled);
+  border: 1px dashed var(--xeplr-border-primary);
+  border-radius: 6px;
+}
+
+.xeplr-admin-empty-box code {
+  background: var(--xeplr-bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+  color: var(--xeplr-text-secondary);
+}
+
+.xeplr-admin-alert {
+  padding: 10px 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.xeplr-admin-alert-error {
+  background: var(--xeplr-danger-bg);
+  color: var(--xeplr-danger);
+  border: 1px solid var(--xeplr-danger-border);
+}

package/src/designs/auth.css

@@ -0,0 +1,160 @@
+@import './theme.css';
+
+.xeplr-auth-container {
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 30px;
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 8px;
+  background: var(--xeplr-bg-primary);
+  text-align: left;
+  color: var(--xeplr-text-primary);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.xeplr-auth-container h1 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.xeplr-auth-form-group {
+  margin-bottom: 15px;
+}
+
+.xeplr-auth-form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+.xeplr-auth-form-group input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--xeplr-input-border);
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+  background: var(--xeplr-input-bg);
+  color: var(--xeplr-input-text);
+}
+
+.xeplr-auth-form-group input::placeholder {
+  color: var(--xeplr-input-placeholder);
+}
+
+.xeplr-auth-form-group input:focus {
+  outline: none;
+  border-color: var(--xeplr-border-focus);
+}
+
+.xeplr-auth-container button[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  background: var(--xeplr-accent);
+  color: var(--xeplr-accent-text);
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.xeplr-auth-container button[type="submit"]:hover {
+  background: var(--xeplr-accent-hover);
+}
+
+.xeplr-auth-container button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.xeplr-auth-links {
+  margin-top: 15px;
+  text-align: center;
+}
+
+.xeplr-auth-links a {
+  color: var(--xeplr-accent);
+  text-decoration: none;
+}
+
+.xeplr-auth-links a:hover {
+  text-decoration: underline;
+}
+
+.xeplr-auth-alert {
+  padding: 10px 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.xeplr-auth-alert-error {
+  background: var(--xeplr-danger-bg);
+  color: var(--xeplr-danger);
+  border: 1px solid var(--xeplr-danger-border);
+}
+
+.xeplr-auth-alert-success {
+  background: var(--xeplr-success-bg);
+  color: var(--xeplr-success);
+  border: 1px solid var(--xeplr-success-border);
+}
+
+.xeplr-auth-not-activated {
+  text-align: center;
+}
+
+.xeplr-auth-not-activated .xeplr-auth-message {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--xeplr-warning);
+  margin: 20px 0;
+}
+
+/* Tenant Picker */
+.xeplr-tenant-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.xeplr-tenant-option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 16px;
+  border: 1px solid var(--xeplr-border-primary, #333);
+  border-radius: 8px;
+  background: var(--xeplr-bg-secondary, #222);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+  width: 100%;
+}
+
+.xeplr-tenant-option:hover {
+  border-color: var(--xeplr-accent, #646cff);
+  background: var(--xeplr-bg-active, #1a1a2a);
+}
+
+.xeplr-tenant-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--xeplr-text-primary, #e0e0e0);
+}
+
+.xeplr-tenant-code {
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--xeplr-tag-text, #9999cc);
+  background: var(--xeplr-tag-bg, #2a2a3a);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.xeplr-tenant-desc {
+  font-size: 13px;
+  color: var(--xeplr-text-muted, #777);
+}

package/src/designs/index.js

@@ -0,0 +1,13 @@
+export { default as LoginSample } from './LoginSample.jsx';
+export { default as RegisterSample } from './RegisterSample.jsx';
+export { default as ForgotPasswordSample } from './ForgotPasswordSample.jsx';
+export { default as ResetPasswordSample } from './ResetPasswordSample.jsx';
+export { default as NotActivatedSample } from './NotActivatedSample.jsx';
+export { default as ActivateSample } from './ActivateSample.jsx';
+export { default as ChangePasswordSample } from './ChangePasswordSample.jsx';
+export { default as ProfileSample } from './ProfileSample.jsx';
+export { default as UserRolesMatrixSample } from './UserRolesMatrixSample.jsx';
+export { default as AccessMatrixSample } from './AccessMatrixSample.jsx';
+export { default as MasterSettingsSample } from './MasterSettingsSample.jsx';
+export { default as TenantSample } from './TenantSample.jsx';
+export { default as TenantPickerSample } from './TenantPickerSample.jsx';