@tomny-dev/uzi 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -0
- package/dist/index.cjs +715 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +813 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +228 -0
- package/dist/index.d.ts +228 -0
- package/dist/index.js +692 -0
- package/dist/index.js.map +1 -0
- package/package.json +42 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button/button.module.css","../src/components/card/card.module.css","../src/components/pill/pill.module.css","../src/components/modal/modal.module.css","../src/components/toast/toast.module.css","../src/components/dropdown/dropdown.module.css","../src/components/app-shell/app-shell.module.css","../src/components/sidebar-nav/sidebar-nav.module.css"],"sourcesContent":[".button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n font-family: inherit;\r\n font-weight: 600;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;\r\n white-space: nowrap;\r\n}\r\n\r\n.button:disabled {\r\n opacity: 0.45;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.size-sm {\r\n font-size: 0.82rem;\r\n padding: 6px 14px;\r\n}\r\n\r\n.size-md {\r\n font-size: 0.95rem;\r\n padding: 10px 22px;\r\n}\r\n\r\n.size-lg {\r\n font-size: 1rem;\r\n padding: 12px 28px;\r\n}\r\n\r\n/* Variants */\r\n.variant-primary {\r\n background: var(--ts-btn-primary-bg, var(--accent, #22d3ee));\r\n color: var(--ts-btn-primary-text, #0f172a);\r\n border: 1px solid transparent;\r\n}\r\n\r\n.variant-primary:hover:not(:disabled) {\r\n opacity: 0.88;\r\n}\r\n\r\n.variant-secondary {\r\n background: var(--ts-btn-secondary-bg, rgba(255, 255, 255, 0.06));\r\n color: var(--ts-btn-secondary-text, var(--text, #e2e8f0));\r\n border: 1px solid var(--ts-btn-secondary-border, var(--border, #1f2937));\r\n}\r\n\r\n.variant-secondary:hover:not(:disabled) {\r\n background: var(--ts-btn-secondary-hover-bg, rgba(255, 255, 255, 0.1));\r\n}\r\n\r\n.variant-outline {\r\n background: transparent;\r\n color: var(--ts-btn-outline-text, var(--text, #e2e8f0));\r\n border: 1px solid var(--ts-btn-outline-border, var(--border, #1f2937));\r\n}\r\n\r\n.variant-outline:hover:not(:disabled) {\r\n border-color: var(--ts-btn-outline-hover-border, var(--accent, #22d3ee));\r\n color: var(--ts-btn-outline-hover-text, var(--accent, #22d3ee));\r\n}\r\n\r\n.variant-ghost {\r\n background: transparent;\r\n color: var(--ts-btn-ghost-text, var(--muted, #94a3b8));\r\n border: 1px solid transparent;\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n}\r\n\r\n.variant-ghost:hover:not(:disabled) {\r\n background: rgba(255, 255, 255, 0.05);\r\n color: var(--text, #e2e8f0);\r\n}\r\n",".card {\r\n position: relative;\r\n overflow: visible;\r\n border-radius: var(--ts-card-radius, 12px);\r\n border: 1px solid var(--ts-card-border, var(--border, #1f2937));\r\n background: var(--ts-card-bg, var(--panel, #111827));\r\n color: var(--ts-card-fg, var(--text, #e2e8f0));\r\n box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));\r\n padding: var(--ts-card-padding, 16px);\r\n transition:\r\n transform 140ms ease,\r\n box-shadow 140ms ease,\r\n border-color 140ms ease,\r\n background-color 140ms ease;\r\n}\r\n\r\n.tone-default {\r\n --ts-card-bg: var(--panel, #111827);\r\n --ts-card-border: var(--border, #1f2937);\r\n --ts-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);\r\n}\r\n\r\n.tone-muted {\r\n --ts-card-bg: var(--ts-card-muted-bg, rgba(255, 255, 255, 0.02));\r\n --ts-card-border: var(--ts-card-muted-border, rgba(255, 255, 255, 0.06));\r\n --ts-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);\r\n}\r\n\r\n.tone-contrast {\r\n --ts-card-bg: var(--ts-card-contrast-bg, #0b1224);\r\n --ts-card-border: var(--ts-card-contrast-border, rgba(255, 255, 255, 0.1));\r\n --ts-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);\r\n}\r\n\r\n.interactive {\r\n cursor: default;\r\n}\r\n\r\n.interactive:hover {\r\n transform: translateY(-1px);\r\n box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);\r\n border-color: var(--ts-card-hover-border, rgba(34, 211, 238, 0.4));\r\n}\r\n\r\n.interactive:focus-within {\r\n outline: 2px solid var(--ts-card-hover-border, rgba(34, 211, 238, 0.45));\r\n outline-offset: 2px;\r\n}\r\n\r\n.padding-none {\r\n --ts-card-padding: 0;\r\n}\r\n\r\n.padding-sm {\r\n --ts-card-padding: 10px;\r\n}\r\n\r\n.padding-md {\r\n --ts-card-padding: 16px;\r\n}\r\n\r\n.padding-lg {\r\n --ts-card-padding: 20px;\r\n}\r\n",".pill {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 10px;\r\n border-radius: 999px;\r\n border: 1px solid var(--ts-pill-border, var(--border, #1f2937));\r\n background: var(--ts-pill-bg, rgba(255, 255, 255, 0.04));\r\n color: var(--ts-pill-fg, var(--muted, #94a3b8));\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 0.05em;\r\n text-transform: uppercase;\r\n line-height: 1.2;\r\n white-space: nowrap;\r\n}\r\n\r\n.size-sm {\r\n padding: 3px 8px;\r\n font-size: 11px;\r\n}\r\n\r\n.size-md {\r\n padding: 4px 10px;\r\n}\r\n\r\n.tone-neutral {\r\n background: var(--ts-pill-bg, rgba(255, 255, 255, 0.04));\r\n border-color: var(--ts-pill-border, var(--border, #1f2937));\r\n color: var(--ts-pill-fg, var(--muted, #94a3b8));\r\n}\r\n\r\n.tone-success {\r\n color: #22c55e;\r\n border-color: rgba(34, 197, 94, 0.45);\r\n background: rgba(34, 197, 94, 0.12);\r\n}\r\n\r\n.tone-warning {\r\n color: #f59e0b;\r\n border-color: rgba(245, 158, 11, 0.45);\r\n background: rgba(245, 158, 11, 0.12);\r\n}\r\n\r\n.tone-info {\r\n color: #22d3ee;\r\n border-color: rgba(34, 211, 238, 0.5);\r\n background: rgba(34, 211, 238, 0.12);\r\n}\r\n\r\n.tone-danger {\r\n color: #f87171;\r\n border-color: rgba(248, 113, 113, 0.45);\r\n background: rgba(248, 113, 113, 0.12);\r\n}\r\n\r\n.icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.content {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n",".backdrop {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.55);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 16px;\r\n z-index: 100;\r\n}\r\n\r\n.modal {\r\n background: #0f172a;\r\n border: 1px solid var(--border, #1f2937);\r\n border-radius: 14px;\r\n padding: 24px;\r\n width: min(500px, 100%);\r\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n}\r\n\r\n/* Size variants */\r\n.size-sm { width: min(380px, 100%); }\r\n.size-md { width: min(500px, 100%); }\r\n.size-lg { width: min(640px, 100%); }\r\n\r\n.header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.titles {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n}\r\n\r\n.title {\r\n font-weight: 700;\r\n font-size: 16px;\r\n color: var(--text, #e2e8f0);\r\n line-height: 1.3;\r\n}\r\n\r\n.subtitle {\r\n font-size: 13px;\r\n color: var(--muted, #94a3b8);\r\n line-height: 1.4;\r\n}\r\n\r\n.closeButton {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n flex-shrink: 0;\r\n background: transparent;\r\n border: 1px solid transparent;\r\n border-radius: 6px;\r\n color: var(--muted, #94a3b8);\r\n cursor: pointer;\r\n transition: background 0.12s, color 0.12s;\r\n padding: 0;\r\n}\r\n\r\n.closeButton:hover {\r\n background: rgba(255, 255, 255, 0.07);\r\n color: var(--text, #e2e8f0);\r\n}\r\n\r\n.body {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n}\r\n\r\n.footer {\r\n display: flex;\r\n gap: 8px;\r\n margin-top: 20px;\r\n}\r\n",".stack {\r\n position: fixed;\r\n z-index: 2147483000;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n pointer-events: none;\r\n}\r\n\r\n.topRight {\r\n top: 16px;\r\n right: 16px;\r\n align-items: flex-end;\r\n}\r\n\r\n.topLeft {\r\n top: 16px;\r\n left: 16px;\r\n align-items: flex-start;\r\n}\r\n\r\n.topCenter {\r\n top: 16px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n align-items: center;\r\n}\r\n\r\n.bottomRight {\r\n bottom: 16px;\r\n right: 16px;\r\n align-items: flex-end;\r\n}\r\n\r\n.bottomLeft {\r\n bottom: 16px;\r\n left: 16px;\r\n align-items: flex-start;\r\n}\r\n\r\n.bottomCenter {\r\n bottom: 16px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n align-items: center;\r\n}\r\n\r\n.toast {\r\n pointer-events: auto;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n min-width: 280px;\r\n max-width: min(420px, calc(100vw - 32px));\r\n padding: 12px 14px;\r\n border-radius: 10px;\r\n border: 1px solid var(--toast-border, #1f2937);\r\n background: var(--toast-bg, #111827);\r\n color: var(--toast-text, #e2e8f0);\r\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);\r\n animation: toastSlideIn 180ms ease-out;\r\n}\r\n\r\n.toast.exit {\r\n animation: toastSlideOut 160ms ease-in forwards;\r\n}\r\n\r\n.icon {\r\n width: 18px;\r\n height: 18px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.body {\r\n flex: 1;\r\n min-width: 0;\r\n display: grid;\r\n gap: 6px;\r\n}\r\n\r\n.message {\r\n word-break: break-word;\r\n font-size: 14px;\r\n line-height: 1.4;\r\n}\r\n\r\n.actions {\r\n display: flex;\r\n gap: 6px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.actionButton {\r\n padding: 5px 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n border-radius: 6px;\r\n border: 1px solid var(--toast-action-border, rgba(0, 0, 0, 0.2));\r\n background: var(--toast-action-bg, rgba(0, 0, 0, 0.1));\r\n color: var(--toast-text, #e2e8f0);\r\n cursor: pointer;\r\n transition: background 120ms ease;\r\n}\r\n\r\n.actionButton:hover {\r\n background: var(--toast-button-bg, rgba(0, 0, 0, 0.15));\r\n}\r\n\r\n.closeButton {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n margin: -2px -4px -2px 0;\r\n border: none;\r\n border-radius: 4px;\r\n background: transparent;\r\n color: var(--toast-text, #e2e8f0);\r\n opacity: 0.6;\r\n cursor: pointer;\r\n transition: opacity 120ms ease, background 120ms ease;\r\n}\r\n\r\n.closeButton:hover {\r\n opacity: 1;\r\n background: var(--toast-button-bg, rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n@keyframes toastSlideIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes toastSlideOut {\r\n from {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateY(-6px);\r\n }\r\n}\r\n",".wrapper {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.trigger {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n padding: 6px 10px 6px 14px;\r\n background: var(--ts-dropdown-bg, var(--panel, #111827));\r\n border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));\r\n border-radius: 8px;\r\n color: var(--ts-dropdown-text, var(--text, #e2e8f0));\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n transition: border-color 0.15s;\r\n user-select: none;\r\n}\r\n\r\n.trigger:hover {\r\n border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));\r\n}\r\n\r\n.trigger-active {\r\n border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));\r\n color: var(--ts-dropdown-accent, var(--accent, #22d3ee));\r\n}\r\n\r\n.chevron {\r\n width: 10px;\r\n height: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.15s;\r\n color: var(--muted, #94a3b8);\r\n flex-shrink: 0;\r\n}\r\n\r\n.chevron-open {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.menu {\r\n position: absolute;\r\n top: calc(100% + 6px);\r\n left: 0;\r\n min-width: 100%;\r\n background: var(--ts-dropdown-bg, var(--panel, #111827));\r\n border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));\r\n border-radius: 10px;\r\n padding: 4px;\r\n z-index: 50;\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\r\n animation: dropdownFadeIn 0.1s ease;\r\n}\r\n\r\n@keyframes dropdownFadeIn {\r\n from { opacity: 0; transform: translateY(-4px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.option {\r\n display: block;\r\n width: 100%;\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n color: var(--muted, #94a3b8);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n text-align: left;\r\n white-space: nowrap;\r\n transition: background 0.1s, color 0.1s;\r\n}\r\n\r\n.option:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n color: var(--ts-dropdown-text, var(--text, #e2e8f0));\r\n}\r\n\r\n.option-selected {\r\n color: var(--ts-dropdown-accent, var(--accent, #22d3ee));\r\n background: rgba(34, 211, 238, 0.08);\r\n}\r\n",".shell {\r\n display: grid;\r\n grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;\r\n grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\r\n min-height: 100vh;\r\n min-height: 100dvh;\r\n transition: grid-template-columns 200ms ease;\r\n}\r\n\r\n.shell.sidebarOpen {\r\n grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;\r\n}\r\n\r\n.shell.sidebarCollapsed {\r\n grid-template-columns: 0 1fr;\r\n}\r\n\r\n.topbar {\r\n grid-column: 1 / -1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));\r\n padding: env(safe-area-inset-top) 16px 0 16px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(17, 24, 39, 0.8);\r\n backdrop-filter: blur(8px);\r\n position: sticky;\r\n top: 0;\r\n z-index: 20;\r\n gap: 12px;\r\n}\r\n\r\n.topbarLeft {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.topbarStart {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.topbarRight {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n min-width: 0;\r\n flex-shrink: 0;\r\n}\r\n\r\n.topbarRight > * {\r\n min-width: 0;\r\n}\r\n\r\n.brand {\r\n font-size: 26px;\r\n color: var(--text);\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.hamburger {\r\n background: transparent;\r\n border: none;\r\n padding: 0;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--text);\r\n cursor: pointer;\r\n transition: background 120ms ease;\r\n}\r\n\r\n.hamburger:hover {\r\n background: rgba(255, 255, 255, 0.06);\r\n}\r\n\r\n.hamburger:focus,\r\n.hamburger:focus-visible {\r\n outline: none;\r\n box-shadow: none;\r\n}\r\n\r\n.hamburger svg {\r\n width: 28px;\r\n height: 28px;\r\n}\r\n\r\n.sidebar {\r\n border-right: 1px solid var(--border);\r\n background: #152036;\r\n padding: 24px;\r\n transition: transform 200ms ease, opacity 200ms ease;\r\n}\r\n\r\n.shell.sidebarCollapsed .sidebar {\r\n transform: translateX(-110%);\r\n opacity: 0;\r\n pointer-events: none;\r\n}\r\n\r\n.main {\r\n overflow-y: auto;\r\n padding: 24px;\r\n padding-bottom: 96px;\r\n min-height: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n align-items: center;\r\n}\r\n\r\n.main > * {\r\n width: 100%;\r\n max-width: 1200px;\r\n min-width: 0;\r\n}\r\n\r\n.backdrop {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n .backdrop {\r\n display: block;\r\n position: fixed;\r\n inset: 0;\r\n top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 14;\r\n }\r\n\r\n .shell {\r\n --app-shell-topbar-height: 56px;\r\n grid-template-columns: 1fr;\r\n grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;\r\n }\r\n\r\n .shell.sidebarOpen,\r\n .shell.sidebarCollapsed {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .sidebar {\r\n display: block;\r\n position: fixed;\r\n top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));\r\n left: 0;\r\n bottom: 0;\r\n width: var(--app-shell-sidebar-width, 240px);\r\n max-width: 80vw;\r\n background: #152036;\r\n padding: 16px 12px;\r\n transform: translateX(-105%);\r\n z-index: 15;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n .sidebar.open {\r\n transform: translateX(0);\r\n }\r\n\r\n .topbar {\r\n padding-left: max(12px, env(safe-area-inset-left));\r\n padding-right: max(12px, env(safe-area-inset-right));\r\n gap: 10px;\r\n }\r\n\r\n .topbarLeft {\r\n gap: 10px;\r\n flex: 1;\r\n }\r\n\r\n .topbarStart {\r\n min-width: 0;\r\n }\r\n\r\n .topbarRight {\r\n gap: 6px;\r\n }\r\n\r\n .brand {\r\n font-size: 24px;\r\n max-width: 50vw;\r\n }\r\n\r\n .hamburger {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n }\r\n\r\n .hamburger svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .main {\r\n padding: 16px;\r\n padding-bottom: 96px;\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .topbar {\r\n gap: 8px;\r\n }\r\n\r\n .brand {\r\n font-size: 22px;\r\n max-width: 34vw;\r\n }\r\n\r\n .topbarRight {\r\n max-width: 44vw;\r\n }\r\n\r\n .main {\r\n padding: 12px 10px;\r\n padding-bottom: 88px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .brand {\r\n font-size: 20px;\r\n max-width: 30vw;\r\n }\r\n}\r\n",".nav {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n align-items: stretch;\r\n}\r\n\r\n.item {\r\n color: var(--text, #e2e8f0);\r\n background: transparent;\r\n border: none;\r\n box-shadow: none;\r\n padding: 10px 12px 10px 10px;\r\n border-radius: 10px;\r\n text-decoration: none;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n width: 100%;\r\n justify-content: flex-start;\r\n text-align: left;\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n line-height: 1.2;\r\n transition: background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.item:focus,\r\n.item:focus-visible {\r\n outline: none;\r\n box-shadow: none;\r\n}\r\n\r\n.item:hover {\r\n background: rgba(29, 43, 70, 0.55);\r\n}\r\n\r\n.item.active {\r\n background: rgba(29, 43, 70, 0.85);\r\n color: var(--text, #e2e8f0);\r\n font-weight: 700;\r\n}\r\n\r\n.icon {\r\n width: 18px;\r\n height: 18px;\r\n color: var(--muted, #94a3b8);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 18px;\r\n vertical-align: middle;\r\n}\r\n\r\n.icon svg {\r\n width: 18px;\r\n height: 18px;\r\n display: block;\r\n stroke: currentColor;\r\n}\r\n\r\n.item.active .icon {\r\n color: var(--accent, #22d3ee);\r\n}\r\n\r\n.label {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n padding: 4px 8px;\r\n border-radius: 999px;\r\n border: 1px solid var(--border, #1f2937);\r\n background: rgba(255, 255, 255, 0.04);\r\n color: var(--muted, #94a3b8);\r\n font-size: 11px;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n .nav {\r\n gap: 6px;\r\n }\r\n\r\n .item {\r\n padding: 9px 10px 9px 8px;\r\n border-radius: 9px;\r\n font-size: 14px;\r\n gap: 6px;\r\n }\r\n\r\n .icon {\r\n width: 16px;\r\n height: 16px;\r\n flex: 0 0 16px;\r\n }\r\n\r\n .icon svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .item {\r\n padding: 8px 9px 8px 7px;\r\n font-size: 13px;\r\n }\r\n}\r\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,eAAa;AACb,eAAa;AACb,iBAAe;AACf,UAAQ;AACR,UAAQ;AACR,mBAAiB;AACjB;AAAA,IAAY,QAAQ,KAAK;AAAA,IAAE,aAAa,KAAK;AAAA,IAAE,MAAM,KAAK;AAAA,IAAE,WAAW;AACvE,eAAa;AACf;AAEA,CAfC,MAeM;AACL,WAAS;AACT,UAAQ;AACV;AAGA,CAAC;AACC,aAAW;AACX,WAAS,IAAI;AACf;AAEA,CAAC;AACC,aAAW;AACX,WAAS,KAAK;AAChB;AAEA,CAAC;AACC,aAAW;AACX,WAAS,KAAK;AAChB;AAGA,CAAC;AACC,cAAY,IAAI,mBAAmB,EAAE,IAAI,QAAQ,EAAE;AACnD,SAAO,IAAI,qBAAqB,EAAE;AAClC,UAAQ,IAAI,MAAM;AACpB;AAEA,CANC,eAMe,MAAM,KAAK;AACzB,WAAS;AACX;AAEA,CAAC;AACC,cAAY,IAAI,qBAAqB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3D,SAAO,IAAI,uBAAuB,EAAE,IAAI,MAAM,EAAE;AAChD,UAAQ,IAAI,MAAM,IAAI,yBAAyB,EAAE,IAAI,QAAQ,EAAE;AACjE;AAEA,CANC,iBAMiB,MAAM,KAAK;AAC3B,cAAY,IAAI,2BAA2B,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACnE;AAEA,CAAC;AACC,cAAY;AACZ,SAAO,IAAI,qBAAqB,EAAE,IAAI,MAAM,EAAE;AAC9C,UAAQ,IAAI,MAAM,IAAI,uBAAuB,EAAE,IAAI,QAAQ,EAAE;AAC/D;AAEA,CANC,eAMe,MAAM,KAAK;AACzB,gBAAc,IAAI,6BAA6B,EAAE,IAAI,QAAQ,EAAE;AAC/D,SAAO,IAAI,2BAA2B,EAAE,IAAI,QAAQ,EAAE;AACxD;AAEA,CAAC;AACC,cAAY;AACZ,SAAO,IAAI,mBAAmB,EAAE,IAAI,OAAO,EAAE;AAC7C,UAAQ,IAAI,MAAM;AAClB,gBAAc;AACd,iBAAe;AACjB;AAEA,CARC,aAQa,MAAM,KAAK;AACvB,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO,IAAI,MAAM,EAAE;AACrB;;;AC/EA,CAAC;AACC,YAAU;AACV,YAAU;AACV,iBAAe,IAAI,gBAAgB,EAAE;AACrC,UAAQ,IAAI,MAAM,IAAI,gBAAgB,EAAE,IAAI,QAAQ,EAAE;AACtD,cAAY,IAAI,YAAY,EAAE,IAAI,OAAO,EAAE;AAC3C,SAAO,IAAI,YAAY,EAAE,IAAI,MAAM,EAAE;AACrC,cAAY,IAAI,gBAAgB,EAAE,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC5D,WAAS,IAAI,iBAAiB,EAAE;AAChC;AAAA,IACE,UAAU,MAAM,IAAI;AAAA,IACpB,WAAW,MAAM,IAAI;AAAA,IACrB,aAAa,MAAM,IAAI;AAAA,IACvB,iBAAiB,MAAM;AAC3B;AAEA,CAAC;AACC,gBAAc,IAAI,OAAO,EAAE;AAC3B,oBAAkB,IAAI,QAAQ,EAAE;AAChC,oBAAkB,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9C;AAEA,CAAC;AACC,gBAAc,IAAI,kBAAkB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC1D,oBAAkB,IAAI,sBAAsB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClE,oBAAkB,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9C;AAEA,CAAC;AACC,gBAAc,IAAI,qBAAqB,EAAE;AACzC,oBAAkB,IAAI,yBAAyB,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACrE,oBAAkB,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9C;AAEA,CAAC;AACC,UAAQ;AACV;AAEA,CAJC,WAIW;AACV,aAAW,WAAW;AACtB,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC,gBAAc,IAAI,sBAAsB,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC/D;AAEA,CAVC,WAUW;AACV,WAAS,IAAI,MAAM,IAAI,sBAAsB,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAClE,kBAAgB;AAClB;AAEA,CAAC;AACC,qBAAmB;AACrB;AAEA,CAAC;AACC,qBAAmB;AACrB;AAEA,CAAC;AACC,qBAAmB;AACrB;AAEA,CAAC;AACC,qBAAmB;AACrB;;;AC/DA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,WAAS,IAAI;AACb,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI,gBAAgB,EAAE,IAAI,QAAQ,EAAE;AACtD,cAAY,IAAI,YAAY,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClD,SAAO,IAAI,YAAY,EAAE,IAAI,OAAO,EAAE;AACtC,aAAW;AACX,eAAa;AACb,kBAAgB;AAChB,kBAAgB;AAChB,eAAa;AACb,eAAa;AACf;AAEA,CAAC;AACC,WAAS,IAAI;AACb,aAAW;AACb;AAEA,CAAC;AACC,WAAS,IAAI;AACf;AAEA,CAAC;AACC,cAAY,IAAI,YAAY,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClD,gBAAc,IAAI,gBAAgB,EAAE,IAAI,QAAQ,EAAE;AAClD,SAAO,IAAI,YAAY,EAAE,IAAI,OAAO,EAAE;AACxC;AAEA,CAAC;AACC,SAAO;AACP,gBAAc,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;AAChC,cAAY,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;AAChC;AAEA,CAAC;AACC,SAAO;AACP,gBAAc,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AACjC,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AACjC;AAEA,CAAC;AACC,SAAO;AACP,gBAAc,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AACjC,cAAY,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AACjC;AAEA,CAAC;AACC,SAAO;AACP,gBAAc,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACP;;;ACpEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,cAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1B,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACT,WAAS;AACX;AAEA,CAAC;AACC,cAAY;AACZ,UAAQ,IAAI,MAAM,IAAI,QAAQ,EAAE;AAChC,iBAAe;AACf,WAAS;AACT,SAAO,IAAI,KAAK,EAAE;AAClB,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAGA,CAAC;AAAU,SAAO,IAAI,KAAK,EAAE;AAAO;AACpC,CAAC;AAAU,SAAO,IAAI,KAAK,EAAE;AAAO;AACpC,CAAC;AAAU,SAAO,IAAI,KAAK,EAAE;AAAO;AAEpC,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,iBAAe;AACjB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAAC;AACC,eAAa;AACb,aAAW;AACX,SAAO,IAAI,MAAM,EAAE;AACnB,eAAa;AACf;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI,OAAO,EAAE;AACpB,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,eAAa;AACb,cAAY;AACZ,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,SAAO,IAAI,OAAO,EAAE;AACpB,UAAQ;AACR,cAAY,WAAW,KAAK,EAAE,MAAM;AACpC,WAAS;AACX;AAEA,CAhBC,WAgBW;AACV,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO,IAAI,MAAM,EAAE;AACrB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAAC;AACC,WAAS;AACT,OAAK;AACL,cAAY;AACd;;;ACtFA,CAAC;AACC,YAAU;AACV,WAAS;AACT,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,kBAAgB;AAClB;AAEA,CAAC;AACC,OAAK;AACL,SAAO;AACP,eAAa;AACf;AAEA,CAAC;AACC,OAAK;AACL,QAAM;AACN,eAAa;AACf;AAEA,CAAC;AACC,OAAK;AACL,QAAM;AACN,aAAW,WAAW;AACtB,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,SAAO;AACP,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,QAAM;AACN,eAAa;AACf;AAEA,CAAC;AACC,UAAQ;AACR,QAAM;AACN,aAAW,WAAW;AACtB,eAAa;AACf;AAEA,CAAC;AACC,kBAAgB;AAChB,WAAS;AACT,eAAa;AACb,OAAK;AACL,aAAW;AACX,aAAW,IAAI,KAAK,EAAE,KAAK,MAAM,EAAE;AACnC,WAAS,KAAK;AACd,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI,cAAc,EAAE;AACtC,cAAY,IAAI,UAAU,EAAE;AAC5B,SAAO,IAAI,YAAY,EAAE;AACzB,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtC,aAAW,aAAa,MAAM;AAChC;AAEA,CAhBC,KAgBK,CAAC;AACL,aAAW,cAAc,MAAM,QAAQ;AACzC;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,eAAa;AACf;AAEA,CAAC;AACC,QAAM;AACN,aAAW;AACX,WAAS;AACT,OAAK;AACP;AAEA,CAAC;AACC,cAAY;AACZ,aAAW;AACX,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,OAAK;AACL,aAAW;AACb;AAEA,CAAC;AACC,WAAS,IAAI;AACb,aAAW;AACX,eAAa;AACb,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3D,cAAY,IAAI,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjD,SAAO,IAAI,YAAY,EAAE;AACzB,UAAQ;AACR,cAAY,WAAW,MAAM;AAC/B;AAEA,CAZC,YAYY;AACX,cAAY,IAAI,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACnD;AAEA,CAAC;AACC,eAAa;AACb,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ,KAAK,KAAK,KAAK;AACvB,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,SAAO,IAAI,YAAY,EAAE;AACzB,WAAS;AACT,UAAQ;AACR,cAAY,QAAQ,MAAM,IAAI,EAAE,WAAW,MAAM;AACnD;AAEA,CAlBC,WAkBW;AACV,WAAS;AACT,cAAY,IAAI,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACnD;AAEA,WAvEa;AAwEX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,WA9Ea;AA+EX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACA;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;;;ACvJA,CAAC;AACC,YAAU;AACV,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,WAAS,IAAI,KAAK,IAAI;AACtB,cAAY,IAAI,gBAAgB,EAAE,IAAI,OAAO,EAAE;AAC/C,UAAQ,IAAI,MAAM,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AAC1D,iBAAe;AACf,SAAO,IAAI,kBAAkB,EAAE,IAAI,MAAM,EAAE;AAC3C,aAAW;AACX,eAAa;AACb,UAAQ;AACR,eAAa;AACb,cAAY,aAAa;AACzB,eAAa;AACf;AAEA,CAlBC,OAkBO;AACN,gBAAc,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AACxD;AAEA,CAAC;AACC,gBAAc,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AACtD,SAAO,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AACjD;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,cAAY,UAAU;AACtB,SAAO,IAAI,OAAO,EAAE;AACpB,eAAa;AACf;AAEA,CAAC;AACC,aAAW,OAAO;AACpB;AAEA,CAAC;AACC,YAAU;AACV,OAAK,KAAK,KAAK,EAAE;AACjB,QAAM;AACN,aAAW;AACX,cAAY,IAAI,gBAAgB,EAAE,IAAI,OAAO,EAAE;AAC/C,UAAQ,IAAI,MAAM,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AAC1D,iBAAe;AACf,WAAS;AACT,WAAS;AACT,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,aAAW,eAAe,KAAK;AACjC;AAEA,WAHa;AAIX;AAAO,aAAS;AAAG,eAAW,WAAW;AAAO;AAChD;AAAO,aAAS;AAAG,eAAW,WAAW;AAAI;AAC/C;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,WAAS,IAAI;AACb,iBAAe;AACf,aAAW;AACX,eAAa;AACb,SAAO,IAAI,OAAO,EAAE;AACpB,cAAY;AACZ,UAAQ;AACR,UAAQ;AACR,cAAY;AACZ,eAAa;AACb,cAAY,WAAW,IAAI,EAAE,MAAM;AACrC;AAEA,CAhBC,MAgBM;AACL,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO,IAAI,kBAAkB,EAAE,IAAI,MAAM,EAAE;AAC7C;AAEA,CAAC;AACC,SAAO,IAAI,oBAAoB,EAAE,IAAI,QAAQ,EAAE;AAC/C,cAAY,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AACjC;;;AC1FA,CAAC;AACC,WAAS;AACT,sBAAoB,KAAK,IAAI,yBAAyB,EAAE,MAAM,EAAE,IAAI,sBAAsB;AAC1F,yBAAuB,IAAI,yBAAyB,EAAE,OAAO;AAC7D,cAAY;AACZ,cAAY;AACZ,cAAY,sBAAsB,MAAM;AAC1C;AAEA,CATC,KASK,CAAC;AACL,yBAAuB,IAAI,yBAAyB,EAAE,OAAO;AAC/D;AAEA,CAbC,KAaK,CAAC;AACL,yBAAuB,EAAE;AAC3B;AAEA,CAAC;AACC,eAAa,EAAE,EAAE;AACjB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ,KAAK,IAAI,yBAAyB,EAAE,MAAM,EAAE,IAAI;AACxD,WAAS,IAAI,qBAAqB,KAAK,EAAE;AACzC,iBAAe,IAAI,MAAM,IAAI;AAC7B,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC7B,mBAAiB,KAAK;AACtB,YAAU;AACV,OAAK;AACL,WAAS;AACT,OAAK;AACP;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,QAAM;AACN,aAAW;AACb;AAEA,CAAC;AACC,QAAM;AACN,aAAW;AACX,WAAS;AACT,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL,aAAW;AACX,eAAa;AACf;AAEA,CARC,YAQY,EAAE;AACb,aAAW;AACb;AAEA,CAAC;AACC,aAAW;AACX,SAAO,IAAI;AACX,mBAAiB;AACjB,WAAS;AACT,eAAa;AACb,aAAW;AACX,YAAU;AACV,iBAAe;AACf,eAAa;AACf;AAEA,CAAC;AACC,cAAY;AACZ,UAAQ;AACR,WAAS;AACT,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ;AACR,cAAY,WAAW,MAAM;AAC/B;AAEA,CAfC,SAeS;AACR,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC;AAEA,CAnBC,SAmBS;AACV,CApBC,SAoBS;AACR,WAAS;AACT,cAAY;AACd;AAEA,CAzBC,UAyBU;AACT,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,gBAAc,IAAI,MAAM,IAAI;AAC5B,cAAY;AACZ,WAAS;AACT,cAAY,UAAU,MAAM,IAAI,EAAE,QAAQ,MAAM;AAClD;AAEA,CA7GC,KA6GK,CAhGC,iBAgGiB,CAPvB;AAQC,aAAW,WAAW;AACtB,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,cAAY;AACZ,WAAS;AACT,kBAAgB;AAChB,cAAY;AACZ,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,eAAa;AACf;AAEA,CAXC,KAWK,EAAE;AACN,SAAO;AACP,aAAW;AACX,aAAW;AACb;AAEA,CAAC;AACC,WAAS;AACX;AAEA,QAAO,WAAY;AACjB,GALD;AAMG,aAAS;AACT,cAAU;AACV,WAAO;AACP,SAAK,KAAK,IAAI,yBAAyB,EAAE,MAAM,EAAE,IAAI;AACrD,gBAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1B,aAAS;AACX;AAEA,GAlJD;AAmJG,+BAA2B;AAC3B,2BAAuB;AACvB,wBAAoB,KAAK,IAAI,yBAAyB,EAAE,MAAM,EAAE,IAAI,sBAAsB;AAC5F;AAEA,GAxJD,KAwJO,CA/ID;AAAA,EAgJL,CAzJD,KAyJO,CA5ID;AA6IH,2BAAuB;AACzB;AAEA,GAvDD;AAwDG,aAAS;AACT,cAAU;AACV,SAAK,KAAK,IAAI,yBAAyB,EAAE,MAAM,EAAE,IAAI;AACrD,UAAM;AACN,YAAQ;AACR,WAAO,IAAI,yBAAyB,EAAE;AACtC,eAAW;AACX,gBAAY;AACZ,aAAS,KAAK;AACd,eAAW,WAAW;AACtB,aAAS;AACT,gBAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxC;AAEA,GAtED,OAsES,CAAC;AACP,eAAW,WAAW;AACxB;AAEA,GA/JD;AAgKG,kBAAc,IAAI,IAAI,EAAE,IAAI;AAC5B,mBAAe,IAAI,IAAI,EAAE,IAAI;AAC7B,SAAK;AACP;AAEA,GArJD;AAsJG,SAAK;AACL,UAAM;AACR;AAEA,GAlJD;AAmJG,eAAW;AACb;AAEA,GA/ID;AAgJG,SAAK;AACP;AAEA,GAvID;AAwIG,eAAW;AACX,eAAW;AACb;AAEA,GAhID;AAiIG,WAAO;AACP,YAAQ;AACR,mBAAe;AACjB;AAEA,GAtID,UAsIY;AACT,WAAO;AACP,YAAQ;AACV;AAEA,GAhGD;AAiGG,aAAS;AACT,oBAAgB;AAClB;AACF;AAEA,QAAO,WAAY;AACjB,GAzMD;AA0MG,SAAK;AACP;AAEA,GAlKD;AAmKG,eAAW;AACX,eAAW;AACb;AAEA,GAnLD;AAoLG,eAAW;AACb;AAEA,GApHD;AAqHG,aAAS,KAAK;AACd,oBAAgB;AAClB;AACF;AAEA,QAAO,WAAY;AACjB,GAlLD;AAmLG,eAAW;AACX,eAAW;AACb;AACF;;;AClPA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACL,eAAa;AACf;AAEA,CAAC;AACC,SAAO,IAAI,MAAM,EAAE;AACnB,cAAY;AACZ,UAAQ;AACR,cAAY;AACZ,WAAS,KAAK,KAAK,KAAK;AACxB,iBAAe;AACf,mBAAiB;AACjB,aAAW;AACX,WAAS;AACT,eAAa;AACb,OAAK;AACL,SAAO;AACP,mBAAiB;AACjB,cAAY;AACZ,cAAY;AACZ,eAAa;AACb,eAAa;AACb,cAAY,WAAW,MAAM,IAAI,EAAE,MAAM,MAAM;AACjD;AAEA,CArBC,IAqBI;AACL,CAtBC,IAsBI;AACH,WAAS;AACT,cAAY;AACd;AAEA,CA3BC,IA2BI;AACH,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC/B;AAEA,CA/BC,IA+BI,CAAC;AACJ,cAAY,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC7B,SAAO,IAAI,MAAM,EAAE;AACnB,eAAa;AACf;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,SAAO,IAAI,OAAO,EAAE;AACpB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,QAAM,EAAE,EAAE;AACV,kBAAgB;AAClB;AAEA,CAXC,KAWK;AACJ,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACV;AAEA,CAvDC,IAuDI,CAxBC,OAwBO,CAlBZ;AAmBC,SAAO,IAAI,QAAQ,EAAE;AACvB;AAEA,CAAC;AACC,QAAM;AACN,aAAW;AACb;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,WAAS,IAAI;AACb,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI,QAAQ,EAAE;AAChC,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO,IAAI,OAAO,EAAE;AACpB,aAAW;AACX,kBAAgB;AAChB,kBAAgB;AAClB;AAEA,QAAO,WAAY;AACjB,GAvFD;AAwFG,SAAK;AACP;AAEA,GApFD;AAqFG,aAAS,IAAI,KAAK,IAAI;AACtB,mBAAe;AACf,eAAW;AACX,SAAK;AACP;AAEA,GAtDD;AAuDG,WAAO;AACP,YAAQ;AACR,UAAM,EAAE,EAAE;AACZ;AAEA,GA5DD,KA4DO;AACJ,WAAO;AACP,YAAQ;AACV;AACF;AAEA,QAAO,WAAY;AACjB,GAxGD;AAyGG,aAAS,IAAI,IAAI,IAAI;AACrB,eAAW;AACb;AACF;","names":[]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonHTMLAttributes, AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
|
|
5
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
6
|
+
type BaseProps = {
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
className?: string;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
type AsButton = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
13
|
+
as?: "button";
|
|
14
|
+
};
|
|
15
|
+
type AsAnchor = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
16
|
+
as: "a";
|
|
17
|
+
};
|
|
18
|
+
type ButtonProps = AsButton | AsAnchor;
|
|
19
|
+
declare function Button({ as, variant, size, className, children, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
type CardTone = "default" | "muted" | "contrast";
|
|
22
|
+
type CardPadding = "none" | "sm" | "md" | "lg";
|
|
23
|
+
type CardElement = "div" | "section" | "article";
|
|
24
|
+
type CardProps = HTMLAttributes<HTMLElement> & {
|
|
25
|
+
/** Optional semantic element type. Defaults to `div`. */
|
|
26
|
+
as?: CardElement;
|
|
27
|
+
/** Visual tone; drives background/border CSS vars. */
|
|
28
|
+
tone?: CardTone;
|
|
29
|
+
/** Padding preset; maps to CSS variables so consumers can override globally. */
|
|
30
|
+
padding?: CardPadding;
|
|
31
|
+
/** Adds hover/focus affordance (lift + outline). */
|
|
32
|
+
interactive?: boolean;
|
|
33
|
+
};
|
|
34
|
+
declare function Card({ as, tone, padding, interactive, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
|
|
36
|
+
type PillTone = "neutral" | "success" | "warning" | "info" | "danger";
|
|
37
|
+
type PillSize = "sm" | "md";
|
|
38
|
+
type PillElement = "span" | "div" | "button";
|
|
39
|
+
type PillProps = HTMLAttributes<HTMLElement> & {
|
|
40
|
+
/** Optional rendered element; defaults to `span`. */
|
|
41
|
+
as?: PillElement;
|
|
42
|
+
/** Visual tone; adjusts color and border. */
|
|
43
|
+
tone?: PillTone;
|
|
44
|
+
/** Size preset. */
|
|
45
|
+
size?: PillSize;
|
|
46
|
+
/** Leading icon node (not focusable). */
|
|
47
|
+
icon?: ReactNode;
|
|
48
|
+
};
|
|
49
|
+
declare function Pill({ as, tone, size, icon, className, children, ...rest }: PillProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
|
|
51
|
+
type ModalSize = "sm" | "md" | "lg";
|
|
52
|
+
type ModalProps = {
|
|
53
|
+
open: boolean;
|
|
54
|
+
onClose: () => void;
|
|
55
|
+
title: string;
|
|
56
|
+
subtitle?: string;
|
|
57
|
+
size?: ModalSize;
|
|
58
|
+
/** Content between the header and footer */
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
/** Rendered inside the footer row — typically action buttons */
|
|
61
|
+
footer?: ReactNode;
|
|
62
|
+
};
|
|
63
|
+
declare function Modal({ open, onClose, title, subtitle, size, children, footer }: ModalProps): react_jsx_runtime.JSX.Element | null;
|
|
64
|
+
|
|
65
|
+
/** Visual intent for a toast. Drives colors and icons. */
|
|
66
|
+
type ToastType = "success" | "error" | "warning" | "info";
|
|
67
|
+
/** Where toast stack is anchored in the viewport. */
|
|
68
|
+
type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
|
|
69
|
+
/** A single toast entry. */
|
|
70
|
+
interface Toast {
|
|
71
|
+
id: string;
|
|
72
|
+
message: string;
|
|
73
|
+
type: ToastType;
|
|
74
|
+
duration?: number;
|
|
75
|
+
dismissible?: boolean;
|
|
76
|
+
action?: {
|
|
77
|
+
label: string;
|
|
78
|
+
onClick: () => void;
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
/** Options when pushing a toast. */
|
|
82
|
+
interface ToastOptions {
|
|
83
|
+
type?: ToastType;
|
|
84
|
+
duration?: number;
|
|
85
|
+
dismissible?: boolean;
|
|
86
|
+
action?: {
|
|
87
|
+
label: string;
|
|
88
|
+
onClick: () => void;
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
/** Provider configuration. */
|
|
92
|
+
interface ToastConfig {
|
|
93
|
+
position?: ToastPosition;
|
|
94
|
+
maxToasts?: number;
|
|
95
|
+
defaultDuration?: number;
|
|
96
|
+
pauseOnHover?: boolean;
|
|
97
|
+
pauseOnFocusLoss?: boolean;
|
|
98
|
+
}
|
|
99
|
+
/** Public API exposed by the toast context. */
|
|
100
|
+
interface ToastContextValue {
|
|
101
|
+
toasts: Toast[];
|
|
102
|
+
push: (message: string, options?: ToastOptions) => string;
|
|
103
|
+
success: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
104
|
+
error: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
105
|
+
warning: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
106
|
+
info: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
107
|
+
dismiss: (id: string) => void;
|
|
108
|
+
dismissAll: () => void;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Toast notification context provider.
|
|
113
|
+
*
|
|
114
|
+
* @remarks
|
|
115
|
+
* Wrap your app (or a section) to enable `useToast` calls. Supports configurable placement,
|
|
116
|
+
* maximum visible toasts, and pause behavior on hover or window blur.
|
|
117
|
+
*
|
|
118
|
+
* @param props.children - React subtree that can consume the toast context.
|
|
119
|
+
* @param props.config - Optional provider configuration overrides.
|
|
120
|
+
*/
|
|
121
|
+
declare function ToastProvider({ children, config, }: {
|
|
122
|
+
children: ReactNode;
|
|
123
|
+
config?: ToastConfig;
|
|
124
|
+
}): react_jsx_runtime.JSX.Element;
|
|
125
|
+
/**
|
|
126
|
+
* Hook to access the toast API.
|
|
127
|
+
*
|
|
128
|
+
* @remarks
|
|
129
|
+
* Exposes `push`, intent helpers (`success`, `error`, `warning`, `info`), and dismissal helpers.
|
|
130
|
+
* Must be called within a `ToastProvider`.
|
|
131
|
+
*
|
|
132
|
+
* @throws Error if used outside of a `ToastProvider`.
|
|
133
|
+
*/
|
|
134
|
+
declare function useToast(): ToastContextValue;
|
|
135
|
+
|
|
136
|
+
interface DropdownOption {
|
|
137
|
+
label: string;
|
|
138
|
+
value: string;
|
|
139
|
+
}
|
|
140
|
+
interface DropdownProps {
|
|
141
|
+
/** List of options to display in the menu. */
|
|
142
|
+
options: DropdownOption[];
|
|
143
|
+
/** Currently selected value. Use empty string for "no selection". */
|
|
144
|
+
value: string;
|
|
145
|
+
/** Called when the user selects an option. */
|
|
146
|
+
onChange: (value: string) => void;
|
|
147
|
+
/** Label shown when no option is selected. Defaults to "All". */
|
|
148
|
+
placeholder?: string;
|
|
149
|
+
/** Additional class name for the wrapper element. */
|
|
150
|
+
className?: string;
|
|
151
|
+
/** Whether to show the placeholder as a clearable option. Defaults to true. */
|
|
152
|
+
allowClear?: boolean;
|
|
153
|
+
/** Associates the trigger button with an external label element via its id. */
|
|
154
|
+
"aria-labelledby"?: string;
|
|
155
|
+
/** Provides an accessible label directly on the trigger button. */
|
|
156
|
+
"aria-label"?: string;
|
|
157
|
+
}
|
|
158
|
+
declare function Dropdown({ options, value, onChange, placeholder, className, allowClear, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
159
|
+
|
|
160
|
+
type AppShellProps = {
|
|
161
|
+
/** Primary page content rendered in the main area. */
|
|
162
|
+
children: ReactNode;
|
|
163
|
+
/** Sidebar navigation or custom content. */
|
|
164
|
+
sidebar: ReactNode;
|
|
165
|
+
/** Brand element rendered next to the hamburger (text or JSX). */
|
|
166
|
+
brand?: ReactNode;
|
|
167
|
+
/** Optional brand href; when provided the brand renders as an anchor. */
|
|
168
|
+
brandHref?: string;
|
|
169
|
+
/** Optional content after the brand on the left side of the top bar. */
|
|
170
|
+
topbarStart?: ReactNode;
|
|
171
|
+
/** Optional content aligned to the right side of the top bar. */
|
|
172
|
+
topbarEnd?: ReactNode;
|
|
173
|
+
/** Custom class names for styling overrides. */
|
|
174
|
+
className?: string;
|
|
175
|
+
sidebarClassName?: string;
|
|
176
|
+
topbarClassName?: string;
|
|
177
|
+
mainClassName?: string;
|
|
178
|
+
/** Sets the sidebar width (e.g., `260`, `"18rem"`). */
|
|
179
|
+
sidebarWidth?: number | string;
|
|
180
|
+
/**
|
|
181
|
+
* Closes the sidebar on mobile whenever this value changes.
|
|
182
|
+
* Useful for reacting to route/pathname changes.
|
|
183
|
+
*/
|
|
184
|
+
closeSidebarOnChangeKey?: unknown;
|
|
185
|
+
/** Label for the hamburger button (aria-label). */
|
|
186
|
+
hamburgerLabel?: string;
|
|
187
|
+
/** Optional callback fired whenever the sidebar open state changes. */
|
|
188
|
+
onSidebarToggle?: (open: boolean) => void;
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* Responsive application shell with a collapsible sidebar and sticky top bar.
|
|
192
|
+
*
|
|
193
|
+
* - Sidebar opens by default on desktop, collapses on mobile.
|
|
194
|
+
* - Closes on outside click/scroll/touch when in mobile mode.
|
|
195
|
+
* - Provides optional hook to close the sidebar when a prop value changes
|
|
196
|
+
* (e.g., route transitions).
|
|
197
|
+
*/
|
|
198
|
+
declare function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel, onSidebarToggle, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
199
|
+
|
|
200
|
+
type SidebarNavItem = {
|
|
201
|
+
label: string;
|
|
202
|
+
href: string;
|
|
203
|
+
icon?: ReactNode;
|
|
204
|
+
badge?: ReactNode;
|
|
205
|
+
active?: boolean;
|
|
206
|
+
target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
|
|
207
|
+
rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
|
|
208
|
+
onClick?: () => void;
|
|
209
|
+
};
|
|
210
|
+
type SidebarNavProps = {
|
|
211
|
+
items: SidebarNavItem[];
|
|
212
|
+
/** Optional path-like value used for default active matching. */
|
|
213
|
+
currentPath?: string;
|
|
214
|
+
/**
|
|
215
|
+
* Custom active matcher. Defaults to prefix matching (with a special case for `/`).
|
|
216
|
+
* If `item.active` is provided, it wins over this function.
|
|
217
|
+
*/
|
|
218
|
+
getIsActive?: (item: SidebarNavItem, currentPath?: string) => boolean;
|
|
219
|
+
/** Called after the item click handler (if provided). */
|
|
220
|
+
onItemClick?: (item: SidebarNavItem) => void;
|
|
221
|
+
className?: string;
|
|
222
|
+
itemClassName?: string;
|
|
223
|
+
};
|
|
224
|
+
declare function SidebarNav({ items, currentPath, getIsActive, onItemClick, className, itemClassName, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
declare function cx(...values: Array<string | false | null | undefined>): string;
|
|
227
|
+
|
|
228
|
+
export { AppShell, type AppShellProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Dropdown, type DropdownOption, type DropdownProps, Modal, type ModalProps, type ModalSize, Pill, type PillProps, type PillSize, type PillTone, SidebarNav, type SidebarNavItem, type SidebarNavProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, cx, useToast };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonHTMLAttributes, AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
|
|
5
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
6
|
+
type BaseProps = {
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
className?: string;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
type AsButton = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
13
|
+
as?: "button";
|
|
14
|
+
};
|
|
15
|
+
type AsAnchor = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
16
|
+
as: "a";
|
|
17
|
+
};
|
|
18
|
+
type ButtonProps = AsButton | AsAnchor;
|
|
19
|
+
declare function Button({ as, variant, size, className, children, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
type CardTone = "default" | "muted" | "contrast";
|
|
22
|
+
type CardPadding = "none" | "sm" | "md" | "lg";
|
|
23
|
+
type CardElement = "div" | "section" | "article";
|
|
24
|
+
type CardProps = HTMLAttributes<HTMLElement> & {
|
|
25
|
+
/** Optional semantic element type. Defaults to `div`. */
|
|
26
|
+
as?: CardElement;
|
|
27
|
+
/** Visual tone; drives background/border CSS vars. */
|
|
28
|
+
tone?: CardTone;
|
|
29
|
+
/** Padding preset; maps to CSS variables so consumers can override globally. */
|
|
30
|
+
padding?: CardPadding;
|
|
31
|
+
/** Adds hover/focus affordance (lift + outline). */
|
|
32
|
+
interactive?: boolean;
|
|
33
|
+
};
|
|
34
|
+
declare function Card({ as, tone, padding, interactive, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
|
|
36
|
+
type PillTone = "neutral" | "success" | "warning" | "info" | "danger";
|
|
37
|
+
type PillSize = "sm" | "md";
|
|
38
|
+
type PillElement = "span" | "div" | "button";
|
|
39
|
+
type PillProps = HTMLAttributes<HTMLElement> & {
|
|
40
|
+
/** Optional rendered element; defaults to `span`. */
|
|
41
|
+
as?: PillElement;
|
|
42
|
+
/** Visual tone; adjusts color and border. */
|
|
43
|
+
tone?: PillTone;
|
|
44
|
+
/** Size preset. */
|
|
45
|
+
size?: PillSize;
|
|
46
|
+
/** Leading icon node (not focusable). */
|
|
47
|
+
icon?: ReactNode;
|
|
48
|
+
};
|
|
49
|
+
declare function Pill({ as, tone, size, icon, className, children, ...rest }: PillProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
|
|
51
|
+
type ModalSize = "sm" | "md" | "lg";
|
|
52
|
+
type ModalProps = {
|
|
53
|
+
open: boolean;
|
|
54
|
+
onClose: () => void;
|
|
55
|
+
title: string;
|
|
56
|
+
subtitle?: string;
|
|
57
|
+
size?: ModalSize;
|
|
58
|
+
/** Content between the header and footer */
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
/** Rendered inside the footer row — typically action buttons */
|
|
61
|
+
footer?: ReactNode;
|
|
62
|
+
};
|
|
63
|
+
declare function Modal({ open, onClose, title, subtitle, size, children, footer }: ModalProps): react_jsx_runtime.JSX.Element | null;
|
|
64
|
+
|
|
65
|
+
/** Visual intent for a toast. Drives colors and icons. */
|
|
66
|
+
type ToastType = "success" | "error" | "warning" | "info";
|
|
67
|
+
/** Where toast stack is anchored in the viewport. */
|
|
68
|
+
type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
|
|
69
|
+
/** A single toast entry. */
|
|
70
|
+
interface Toast {
|
|
71
|
+
id: string;
|
|
72
|
+
message: string;
|
|
73
|
+
type: ToastType;
|
|
74
|
+
duration?: number;
|
|
75
|
+
dismissible?: boolean;
|
|
76
|
+
action?: {
|
|
77
|
+
label: string;
|
|
78
|
+
onClick: () => void;
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
/** Options when pushing a toast. */
|
|
82
|
+
interface ToastOptions {
|
|
83
|
+
type?: ToastType;
|
|
84
|
+
duration?: number;
|
|
85
|
+
dismissible?: boolean;
|
|
86
|
+
action?: {
|
|
87
|
+
label: string;
|
|
88
|
+
onClick: () => void;
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
/** Provider configuration. */
|
|
92
|
+
interface ToastConfig {
|
|
93
|
+
position?: ToastPosition;
|
|
94
|
+
maxToasts?: number;
|
|
95
|
+
defaultDuration?: number;
|
|
96
|
+
pauseOnHover?: boolean;
|
|
97
|
+
pauseOnFocusLoss?: boolean;
|
|
98
|
+
}
|
|
99
|
+
/** Public API exposed by the toast context. */
|
|
100
|
+
interface ToastContextValue {
|
|
101
|
+
toasts: Toast[];
|
|
102
|
+
push: (message: string, options?: ToastOptions) => string;
|
|
103
|
+
success: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
104
|
+
error: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
105
|
+
warning: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
106
|
+
info: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
107
|
+
dismiss: (id: string) => void;
|
|
108
|
+
dismissAll: () => void;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Toast notification context provider.
|
|
113
|
+
*
|
|
114
|
+
* @remarks
|
|
115
|
+
* Wrap your app (or a section) to enable `useToast` calls. Supports configurable placement,
|
|
116
|
+
* maximum visible toasts, and pause behavior on hover or window blur.
|
|
117
|
+
*
|
|
118
|
+
* @param props.children - React subtree that can consume the toast context.
|
|
119
|
+
* @param props.config - Optional provider configuration overrides.
|
|
120
|
+
*/
|
|
121
|
+
declare function ToastProvider({ children, config, }: {
|
|
122
|
+
children: ReactNode;
|
|
123
|
+
config?: ToastConfig;
|
|
124
|
+
}): react_jsx_runtime.JSX.Element;
|
|
125
|
+
/**
|
|
126
|
+
* Hook to access the toast API.
|
|
127
|
+
*
|
|
128
|
+
* @remarks
|
|
129
|
+
* Exposes `push`, intent helpers (`success`, `error`, `warning`, `info`), and dismissal helpers.
|
|
130
|
+
* Must be called within a `ToastProvider`.
|
|
131
|
+
*
|
|
132
|
+
* @throws Error if used outside of a `ToastProvider`.
|
|
133
|
+
*/
|
|
134
|
+
declare function useToast(): ToastContextValue;
|
|
135
|
+
|
|
136
|
+
interface DropdownOption {
|
|
137
|
+
label: string;
|
|
138
|
+
value: string;
|
|
139
|
+
}
|
|
140
|
+
interface DropdownProps {
|
|
141
|
+
/** List of options to display in the menu. */
|
|
142
|
+
options: DropdownOption[];
|
|
143
|
+
/** Currently selected value. Use empty string for "no selection". */
|
|
144
|
+
value: string;
|
|
145
|
+
/** Called when the user selects an option. */
|
|
146
|
+
onChange: (value: string) => void;
|
|
147
|
+
/** Label shown when no option is selected. Defaults to "All". */
|
|
148
|
+
placeholder?: string;
|
|
149
|
+
/** Additional class name for the wrapper element. */
|
|
150
|
+
className?: string;
|
|
151
|
+
/** Whether to show the placeholder as a clearable option. Defaults to true. */
|
|
152
|
+
allowClear?: boolean;
|
|
153
|
+
/** Associates the trigger button with an external label element via its id. */
|
|
154
|
+
"aria-labelledby"?: string;
|
|
155
|
+
/** Provides an accessible label directly on the trigger button. */
|
|
156
|
+
"aria-label"?: string;
|
|
157
|
+
}
|
|
158
|
+
declare function Dropdown({ options, value, onChange, placeholder, className, allowClear, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
159
|
+
|
|
160
|
+
type AppShellProps = {
|
|
161
|
+
/** Primary page content rendered in the main area. */
|
|
162
|
+
children: ReactNode;
|
|
163
|
+
/** Sidebar navigation or custom content. */
|
|
164
|
+
sidebar: ReactNode;
|
|
165
|
+
/** Brand element rendered next to the hamburger (text or JSX). */
|
|
166
|
+
brand?: ReactNode;
|
|
167
|
+
/** Optional brand href; when provided the brand renders as an anchor. */
|
|
168
|
+
brandHref?: string;
|
|
169
|
+
/** Optional content after the brand on the left side of the top bar. */
|
|
170
|
+
topbarStart?: ReactNode;
|
|
171
|
+
/** Optional content aligned to the right side of the top bar. */
|
|
172
|
+
topbarEnd?: ReactNode;
|
|
173
|
+
/** Custom class names for styling overrides. */
|
|
174
|
+
className?: string;
|
|
175
|
+
sidebarClassName?: string;
|
|
176
|
+
topbarClassName?: string;
|
|
177
|
+
mainClassName?: string;
|
|
178
|
+
/** Sets the sidebar width (e.g., `260`, `"18rem"`). */
|
|
179
|
+
sidebarWidth?: number | string;
|
|
180
|
+
/**
|
|
181
|
+
* Closes the sidebar on mobile whenever this value changes.
|
|
182
|
+
* Useful for reacting to route/pathname changes.
|
|
183
|
+
*/
|
|
184
|
+
closeSidebarOnChangeKey?: unknown;
|
|
185
|
+
/** Label for the hamburger button (aria-label). */
|
|
186
|
+
hamburgerLabel?: string;
|
|
187
|
+
/** Optional callback fired whenever the sidebar open state changes. */
|
|
188
|
+
onSidebarToggle?: (open: boolean) => void;
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* Responsive application shell with a collapsible sidebar and sticky top bar.
|
|
192
|
+
*
|
|
193
|
+
* - Sidebar opens by default on desktop, collapses on mobile.
|
|
194
|
+
* - Closes on outside click/scroll/touch when in mobile mode.
|
|
195
|
+
* - Provides optional hook to close the sidebar when a prop value changes
|
|
196
|
+
* (e.g., route transitions).
|
|
197
|
+
*/
|
|
198
|
+
declare function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel, onSidebarToggle, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
199
|
+
|
|
200
|
+
type SidebarNavItem = {
|
|
201
|
+
label: string;
|
|
202
|
+
href: string;
|
|
203
|
+
icon?: ReactNode;
|
|
204
|
+
badge?: ReactNode;
|
|
205
|
+
active?: boolean;
|
|
206
|
+
target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
|
|
207
|
+
rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
|
|
208
|
+
onClick?: () => void;
|
|
209
|
+
};
|
|
210
|
+
type SidebarNavProps = {
|
|
211
|
+
items: SidebarNavItem[];
|
|
212
|
+
/** Optional path-like value used for default active matching. */
|
|
213
|
+
currentPath?: string;
|
|
214
|
+
/**
|
|
215
|
+
* Custom active matcher. Defaults to prefix matching (with a special case for `/`).
|
|
216
|
+
* If `item.active` is provided, it wins over this function.
|
|
217
|
+
*/
|
|
218
|
+
getIsActive?: (item: SidebarNavItem, currentPath?: string) => boolean;
|
|
219
|
+
/** Called after the item click handler (if provided). */
|
|
220
|
+
onItemClick?: (item: SidebarNavItem) => void;
|
|
221
|
+
className?: string;
|
|
222
|
+
itemClassName?: string;
|
|
223
|
+
};
|
|
224
|
+
declare function SidebarNav({ items, currentPath, getIsActive, onItemClick, className, itemClassName, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
declare function cx(...values: Array<string | false | null | undefined>): string;
|
|
227
|
+
|
|
228
|
+
export { AppShell, type AppShellProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Dropdown, type DropdownOption, type DropdownProps, Modal, type ModalProps, type ModalSize, Pill, type PillProps, type PillSize, type PillTone, SidebarNav, type SidebarNavItem, type SidebarNavProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, cx, useToast };
|