@slyxup/ui 0.2.7 → 0.2.9

package/src/index.ts

@@ -3,7 +3,10 @@ export { KeyholeMark, GoogleIcon, GitHubIcon, CheckIcon } from './icons';
 
 export { SignIn, type SignInProps } from './components/SignIn/SignIn';
 export { SignUp, type SignUpProps } from './components/SignUp/SignUp';
-export { UserButton } from './components/UserButton/UserButton';
+export {
+  UserButton,
+  type UserButtonProps,
+} from './components/UserButton/UserButton';
 export {
   UserProfile,
   type UserProfileProps,
@@ -24,6 +27,14 @@ export {
   SocialButtons,
   type SocialButtonsProps,
 } from './components/SocialButtons/SocialButtons';
+export {
+  BillingPortal,
+  type BillingPortalProps,
+} from './components/BillingPortal/BillingPortal';
+export {
+  PricingTable,
+  type PricingTableProps,
+} from './components/PricingTable/PricingTable';
 
 import { useEffect } from 'react';
 import { injectStyles } from './styles';

package/src/styles.ts

@@ -308,6 +308,275 @@ export const CSS = `
   background: color-mix(in srgb, var(--slx-success) 9%, transparent);
   border: 1px solid color-mix(in srgb, var(--slx-success) 30%, transparent);
 }
+.slx-badge-ok { color: var(--slx-success); background: color-mix(in srgb, var(--slx-success) 9%, transparent); border-color: color-mix(in srgb, var(--slx-success) 30%, transparent); }
+.slx-badge-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
+.slx-badge-accent { color: var(--slx-accent); background: var(--slx-accent-soft); border-color: color-mix(in srgb, var(--slx-accent) 30%, transparent); }
+.slyxup-root:not(.slyxup-light) .slx-badge-warn { color: #fbbf24; }
+
+/* ── Modal overlay ── */
+.slx-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(12, 12, 18, 0.55);
+  backdrop-filter: blur(6px);
+  animation: slx-rise .2s cubic-bezier(.22,.9,.32,1) both;
+  padding: 16px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+/* ── UserProfile ── */
+.slx-profile-modal {
+  display: flex; flex-direction: column;
+  width: 720px; max-width: calc(100vw - 32px);
+  max-height: min(85vh, 720px);
+  background: var(--slx-bg);
+  border-radius: var(--slx-radius-lg);
+  box-shadow: var(--slx-shadow-pop);
+  overflow: hidden;
+  animation: slx-rise .28s cubic-bezier(.22,.9,.32,1) both;
+  box-sizing: border-box;
+}
+.slx-profile-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 22px 28px 18px;
+  border-bottom: 1px solid var(--slx-border);
+  flex-shrink: 0;
+  background: var(--slx-bg);
+  position: relative;
+  z-index: 1;
+}
+.slx-profile-title {
+  font-family: var(--slx-display);
+  font-size: 18px; font-weight: 650; letter-spacing: -0.02em;
+  color: var(--slx-ink-strong);
+  margin: 0;
+}
+.slx-profile-close {
+  width: 32px; height: 32px; border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  background: none; border: 1px solid var(--slx-border);
+  color: var(--slx-muted); cursor: pointer; font-size: 16px;
+  transition: background .12s, color .12s, border-color .12s;
+  position: relative;
+  z-index: 2;
+  pointer-events: auto;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+.slx-profile-close:hover { background: var(--slx-bg-subtle); color: var(--slx-ink); border-color: var(--slx-border-strong); }
+.slx-profile-close:active { transform: scale(.95); }
+.slx-profile-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--slx-accent-soft); }
+
+.slx-profile-body {
+  display: flex; flex: 1; min-height: 380px;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* ── Left nav ── */
+.slx-profile-nav {
+  width: 200px; flex-shrink: 0;
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 12px 8px;
+  border-right: 1px solid var(--slx-border);
+  background: var(--slx-bg-subtle);
+}
+.slx-profile-nav-btn {
+  display: flex; align-items: center; gap: 9px;
+  font: inherit; font-size: 13.5px; font-weight: 500;
+  color: var(--slx-muted); background: none; border: none;
+  border-radius: var(--slx-radius-sm);
+  padding: 9px 12px; cursor: pointer; text-align: left;
+  transition: background .12s, color .12s;
+}
+.slx-profile-nav-btn:hover { background: color-mix(in srgb, var(--slx-ink) 5%, transparent); color: var(--slx-ink); }
+.slx-profile-nav-btn.on { background: var(--slx-bg); color: var(--slx-ink-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(18,18,28,.06); }
+.slx-profile-nav-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--slx-accent-soft); }
+
+/* ── Content area ── */
+.slx-profile-content {
+  flex: 1; overflow-y: auto; padding: 24px 28px 28px;
+}
+.slx-profile-sec { margin-bottom: 28px; }
+.slx-profile-sec:last-child { margin-bottom: 0; }
+.slx-sec-title {
+  font-family: var(--slx-display);
+  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
+  color: var(--slx-ink-strong);
+  margin: 0 0 14px; padding-bottom: 10px;
+  border-bottom: 1px solid var(--slx-border);
+}
+
+/* ── Avatar ── */
+.slx-avatar-row {
+  display: flex; align-items: center; gap: 16px;
+  margin-bottom: 20px;
+}
+.slx-avatar-lg {
+  width: 64px; height: 64px; border-radius: 50%;
+  flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px; font-weight: 700; color: #fff;
+  background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(91,91,214,.3);
+}
+.slx-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ── Row (email etc.) ── */
+.slx-row-value { font-size: 14px; font-weight: 500; color: var(--slx-ink-strong); margin: 0; }
+.slx-row-label { font-size: 12px; color: var(--slx-muted); margin: 2px 0 0; }
+
+/* ── Sessions ── */
+.slx-session {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 14px; border-radius: var(--slx-radius-sm);
+  border: 1px solid var(--slx-border);
+  background: var(--slx-bg-subtle);
+  margin-bottom: 8px;
+  transition: border-color .12s;
+}
+.slx-session:hover { border-color: var(--slx-border-strong); }
+.slx-session-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.slx-session-device { font-size: 13.5px; font-weight: 550; color: var(--slx-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.slx-session-sub { font-size: 12px; color: var(--slx-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* ── Danger zone ── */
+.slx-danger-zone {
+  border: 1px solid color-mix(in srgb, var(--slx-danger) 30%, transparent);
+  border-radius: var(--slx-radius);
+  padding: 18px 20px;
+  background: color-mix(in srgb, var(--slx-danger) 4%, transparent);
+}
+.slx-danger-title {
+  font-size: 14px; font-weight: 650; color: var(--slx-danger);
+  margin: 0 0 6px;
+}
+.slx-danger-desc {
+  font-size: 13px; color: var(--slx-muted); line-height: 1.5;
+  margin: 0 0 16px;
+}
+.slx-btn-danger-outline {
+  font: inherit; font-size: 13px; font-weight: 550;
+  color: var(--slx-danger); background: none;
+  border: 1px solid color-mix(in srgb, var(--slx-danger) 35%, transparent);
+  border-radius: var(--slx-radius-sm);
+  padding: 7px 14px; cursor: pointer;
+  transition: background .12s, border-color .12s;
+}
+.slx-btn-danger-outline:hover { background: color-mix(in srgb, var(--slx-danger) 8%, transparent); border-color: var(--slx-danger); }
+.slx-btn-danger-outline:active { transform: scale(.98); }
+.slx-btn-danger-outline:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--slx-danger) 20%, transparent); }
+.slx-btn-danger-outline[disabled] { opacity: .5; cursor: not-allowed; }
+
+/* ── Billing (inside UserProfile) ── */
+.slx-billing-card {
+  border: 1px solid var(--slx-border);
+  border-radius: var(--slx-radius);
+  padding: 18px 20px;
+  background: var(--slx-bg-subtle);
+  margin-bottom: 16px;
+}
+.slx-billing-plan { font-size: 15px; font-weight: 650; color: var(--slx-ink-strong); margin: 0 0 4px; }
+.slx-billing-detail { font-size: 13px; color: var(--slx-muted); margin: 2px 0; }
+.slx-billing-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
+.slx-billing-status-active { color: var(--slx-success); }
+.slx-billing-status-trialing { color: var(--slx-accent); }
+.slx-billing-status-canceled { color: var(--slx-danger); }
+.slx-invoice-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 0; border-bottom: 1px solid var(--slx-border);
+  font-size: 13px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.slx-invoice-row:last-child { border-bottom: none; }
+.slx-invoice-date { color: var(--slx-muted); }
+.slx-invoice-amount { font-weight: 600; color: var(--slx-ink-strong); }
+
+/* ── Billing plans grid (responsive) ── */
+.slx-billing-plans {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin-top: 12px;
+}
+.slx-plan-card {
+  border: 1px solid var(--slx-border);
+  border-radius: var(--slx-radius);
+  padding: 16px;
+  background: var(--slx-bg);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: border-color .15s, box-shadow .15s;
+}
+.slx-plan-card:hover { border-color: var(--slx-border-strong); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
+.slx-plan-card.popular { border-color: var(--slx-accent); box-shadow: 0 0 0 1px var(--slx-accent-soft); }
+.slx-plan-badge {
+  position: absolute; top: -10px; right: 12px;
+  font-size: 10px; font-weight: 700; letter-spacing: .05em;
+  color: #fff; background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  padding: 3px 8px; border-radius: 999px;
+}
+.slx-plan-name { font-size: 14px; font-weight: 600; color: var(--slx-ink-strong); margin: 0 0 6px; }
+.slx-plan-price { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; color: var(--slx-ink-strong); }
+.slx-plan-interval { font-size: 13px; color: var(--slx-muted); font-weight: 400; }
+.slx-plan-features { list-style: none; margin: 12px 0 16px; padding: 0; flex: 1; }
+.slx-plan-features li { font-size: 13px; color: var(--slx-ink); padding: 4px 0 4px 20px; position: relative; line-height: 1.45; }
+.slx-plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--slx-success); font-weight: 700; font-size: 12px; }
+.slx-plan-cta { width: 100%; margin-top: auto; }
+.slx-billing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
+.slx-btn-secondary {
+  font: inherit; font-size: 13px; font-weight: 550;
+  color: var(--slx-ink); background: var(--slx-bg);
+  border: 1px solid var(--slx-border-strong); border-radius: var(--slx-radius-sm);
+  padding: 8px 14px; cursor: pointer;
+  transition: background .12s, border-color .12s;
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+}
+.slx-btn-secondary:hover { background: var(--slx-bg-subtle); }
+.slx-btn-secondary:active { transform: scale(.98); }
+.slx-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--slx-accent-soft); }
+.slx-btn-secondary[disabled] { opacity: .55; cursor: not-allowed; }
+.slx-billing-empty { text-align: center; padding: 24px 16px; color: var(--slx-muted); font-size: 13px; line-height: 1.5; }
+
+/* ── Mobile friendliness for UserProfile ── */
+@media (max-width: 680px) {
+  .slx-overlay { align-items: flex-start; padding: 12px; }
+  .slx-profile-modal {
+    width: 100%; max-width: 100%;
+    max-height: calc(100vh - 24px);
+    max-height: calc(100dvh - 24px);
+    margin: auto;
+    border-radius: var(--slx-radius-lg);
+  }
+  .slx-profile-body { flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; }
+  .slx-profile-nav {
+    width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
+    border-right: none; border-bottom: 1px solid var(--slx-border);
+    padding: 8px; gap: 6px; scrollbar-width: none; -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+    flex-shrink: 0;
+  }
+  .slx-profile-nav::-webkit-scrollbar { display: none; }
+  .slx-profile-nav-btn { white-space: nowrap; flex-shrink: 0; font-size: 13px; padding: 8px 12px; }
+  .slx-profile-content { padding: 16px; overflow: visible; }
+  .slx-profile-head { padding: 16px 16px 12px; }
+  .slx-profile-close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 18px; border-radius: 10px; }
+  .slx-avatar-row { gap: 12px; flex-wrap: wrap; }
+  .slx-billing-plans { grid-template-columns: 1fr; }
+  .slx-session { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .slx-session .slx-btn-danger-outline { align-self: stretch; text-align: center; justify-content: center; }
+  .slx-invoice-row { flex-wrap: wrap; gap: 6px; }
+}
+@media (max-width: 380px) {
+  .slx-profile-content { padding: 12px; }
+  .slx-profile-head { padding: 12px 12px 10px; }
+  .slx-profile-title { font-size: 16px; }
+}
 `;
 
 let injected = false;

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @slyxup/ui@0.2.7 build /home/runner/work/stack/stack/packages/ui
-> tsc -p tsconfig.json
-

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 SlyxUp
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.