@xyd-js/ui 0.1.0-build.173

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+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. 

package/README.md

@@ -0,0 +1,3 @@
+# @xyd-js/ui
+
+Next version of internal `xyd` ui components.

package/dist/index.css

@@ -0,0 +1,19 @@
+@layer defaults{.n1vu90xp{position:sticky;top:0;z-index:20;width:100%;background:transparent;display:flex;}.n1vu90xp [role="tablist"]{display:flex;align-items:center;}.n1vu90xp [part="shadow"]::before{pointer-events:none;position:absolute;z-index:-1;height:100%;width:100%;background-color:var(--xyd-nav-shadow-bgcolor);}.n1vu90xp [part="nav-left"]{display:flex;align-items:center;flex:1;overflow:auto;}@media (max-width: 1024px){.n1vu90xp:has([part="nav-center"]) [part="nav-left"]{flex:none;}}.n1vu90xp [part="nav"]{display:flex;width:100%;height:var(--xyd-nav-height);align-items:center;justify-content:flex-end;gap:8px;padding:0 var(--xyd-nav-padding);}.n1vu90xp [part="nav-center"]{flex:1;}.n1vu90xp [part="nav-center"] [role="tablist"]{justify-content:center;}.n1vu90xp [part="logo"]{display:flex;align-items:center;height:28px;width:auto;}.n1vu90xp [part="logo"] img{height:28px;width:auto;}.n1vu90xp [part="nav-list"]{display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:auto;}@media (max-width: 1024px){.n1vu90xp [part="nav-list"]{display:none;}}.n1vu90xp [part="nav-right"]{display:flex;align-items:center;justify-content:flex-end;flex:1;}@media (max-width: 1024px){.n1vu90xp [part="nav-right"]{width:100%;overflow:auto;}.n1vu90xp [role="tablist"]{overflow:auto;}}.n1vu90xp [part="nav-right"] [role="tablist"]{display:flex;}.n1vu90xp [part="nav-float-right"]{position:relative;display:flex;align-items:center;}.n1vu90xp[data-appearance-separator="right"] [part="nav-float-right"]::before{border-inline-end:1px solid var(--color-header-border, var(--dark32));content:"";display:block;position:absolute;left:0;height:calc(100% - var(--xyd-nav-item-padding-y) * 2);}}
+@layer defaults{.i1i2i14o{--xyd-anchor-color:currentColor;--xyd-anchor-color--hover:currentColor;position:relative;white-space:nowrap;color:var(--xyd-nav-item-color);padding:var(--xyd-nav-item-padding-y) var(--xyd-nav-item-padding);display:flex;align-items:center;justify-content:center;}.i1i2i14o:hover{color:var(--xyd-nav-item-color--active);}.i1i2i14o[data-state="active"]{font-weight:bold;background:var(--xyd-nav-item-bgcolor--active);border-radius:8px;}.i1i2i14o [part="nav-item1"]{position:absolute;inset:0;text-align:center;align-items:center;display:flex;justify-content:center;}.i1i2i14o [part="nav-item2"]{visibility:hidden;font-weight:var(--xyd-font-weight-semibold);}}
+
+@layer defaults{.p1jzdbj3{position:fixed;top:0;left:0;right:0;z-index:50;background-color:var(--xyd-progressbar-bgcolor);height:0;opacity:0;transition:opacity .1s linear;transition-delay:0s;will-change:opacity;}.p1jzdbj3[data-active="true"]{height:.25rem;opacity:1;transition-delay:.3s;}.p1jzdbj3 [part="item"]{height:100%;transition:all .5s ease-in-out;transition-delay:.1s;background-color:var(--xyd-progressbar-bgcolor--active);}.p1jzdbj3[data-loading="true"] [part="item"]{width:100%;}}
+
+@layer defaults{.c12fwmxc{display:block;transform:translateZ(0);overflow:hidden;transition:width 300ms cubic-bezier(0.4, 0, 0.2, 1),height 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:width,height;}@media (prefers-reduced-motion: reduce){.c12fwmxc{transition:none;}}.c12fwmxc [part="child"]{opacity:0;transition:opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:opacity;}@media (prefers-reduced-motion: reduce){.c12fwmxc [part="child"]{transition:none;}}.c12fwmxc[data-open="true"] [part="child"]{opacity:1;}}
+
+@layer defaults{.sptag3l{background:var(--xyd-sidebar-bgcolor);height:100%;border-radius:4px;display:flex;flex-direction:column;}.sptag3l [part="item-group"]>*{padding-bottom:4px;}.sptag3l [part="item-group"]+[part="item"]{margin-top:24px;}.sptag3l [part="scroll-shadow"]::before{background:var(--shadow);content:"";height:20px;left:0;-webkit-mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000);mask-image:linear-gradient(0deg, transparent, #000);opacity:1;pointer-events:none;position:absolute;right:10px;top:0;transition:opacity .1s ease;z-index:2;left:0;right:0;}.sptag3l [part="list"]{overflow-y:auto;overflow-x:hidden;height:100%;padding:var(--xyd-sidebar-padding);}.sptag3l [part="footer"]{padding:var(--xyd-sidebar-padding);border-top:1px solid var(--xyd-sidebar-divider-color);}.sptag3l [part="footer"] [part="item"] [part="primary-item"]>svg{width:16px!important;height:16px!important;}.sptag3l [part="logo"]{display:flex;align-items:center;height:28px;width:auto;}.sptag3l [part="logo"] img{height:28px;width:auto;}}
+@layer defaults{.iead4fo{color:var(--xyd-sidebar-item-color);}.iead4fo button{width:100%;}.iead4fo [part="link"]{display:flex;width:100%;font-weight:var(--xyd-font-weight-medium);}.iead4fo [part="primary-item"]{display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px 6px var(--xyd-sidebar-item-padding-left);margin-bottom:4px;position:relative;}.iead4fo [part="primary-item"][data-ghost="true"]{padding:var(--xyd-sidebar-ghost-item-padding);}.iead4fo [part="primary-item"]:not([data-ghost="true"]):hover{background:var(--xyd-sidebar-item-bgcolor--active-hover);color:var( --xyd-sidebar-item-color--active);border-radius:4px;}.iead4fo [part="primary-item"] [part="item-title-container"]{width:100%;display:flex;align-items:center;justify-content:space-between;}.iead4fo [part="primary-item"] [part="item-title"]{overflow:hidden;text-overflow:ellipsis;white-space:break-spaces;text-align:left;}.iead4fo [part="primary-item" ][data-active="true"]{background:var(--xyd-sidebar-item-bgcolor--active);border-radius:4px;position:relative;font-weight:var(--xyd-font-weight-semibold);color:var(--xyd-sidebar-item-color--active);}.iead4fo [part="primary-item" ][data-active="true"]::before{content:"";position:absolute;background:var(--xyd-sidebar-item-bgcolor--active-mark);border-radius:0 2px 2px 0;bottom:9px;top:9px;width:2px;left:5px;border-radius:10px;}.iead4fo [part="primary-item"][data-parent-active="true"]{font-weight:var(--xyd-font-weight-semibold);background:transparent;}.iead4fo[data-theme="secondary"] [part="primary-item"][data-active="true"]{background:unset;font-weight:var(--xyd-font-weight-medium);}.iead4fo [part="item-button"]:has(+ [part="subtree"] xyd-collapse){position:relative;}.iead4fo [part="item-button"]:has(+ [part="subtree"] xyd-collapse)::after{content:"";position:absolute;right:8px;top:0;bottom:0;width:16px;display:flex;align-items:center;justify-content:center;background-color:var(--xyd-sidebar-item-color);-webkit-mask-image:url(/Users/zdunecki/Code/livesession/xyd/packages/xyd-ui/src/components/Sidebar/chevronIcon.svg);-webkit-mask-image:url(/Users/zdunecki/Code/livesession/xyd/packages/xyd-ui/src/components/Sidebar/chevronIcon.svg);mask-image:url(/Users/zdunecki/Code/livesession/xyd/packages/xyd-ui/src/components/Sidebar/chevronIcon.svg);-webkit-mask-size:contain;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-position:center;mask-position:center;transition:transform 0.2s ease,background-color 0.2s ease;transform:rotate(-90deg);}.iead4fo [part="item-button"]:has(+ [part="subtree"] xyd-collapse):hover::after{background-color:var(--xyd-sidebar-item-color--active);}.iead4fo [part="item-button"]:has(+ [part="subtree"] > xyd-collapse[data-open="true"]){font-weight:bold;}.iead4fo [part="item-button"]:has(+ [part="subtree"] > xyd-collapse[data-open="true"])::after{transform:rotate(0deg);}}
+@layer defaults{.t1hrlfak{margin-left:12px;}}
+@layer defaults{.i1btwdcv{font-size:var(--xyd-font-size-xsmall);font-weight:var(--xyd-font-weight-extrabold);text-transform:uppercase;letter-spacing:0.25px;color:var( --xyd-sidebar-item-header-color);padding-left:var(--xyd-sidebar-item-padding-left);margin-bottom:8px;margin-top:24px;display:flex;align-items:center;gap:8px;}}
+
+html[data-color-primary="true"] [part="dropdown-icon"] svg {fill:var(--color-primary)!important;color:var(--color-primary)!important;}html[data-color-primary="true"] [part="chevron-check"] svg {color:var(--color-primary);}@keyframes fadeIn-d1vhwytf{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeOut-d1vhwytf{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-4px);}}@layer defaults{.d1vhwytf{display:block;padding:var(--xyd-sidebar-ghost-item-padding);}.d1vhwytf button[part="dropdown-trigger"]{display:flex;align-items:center;width:100%;background:var(--white);border:1px solid var(--dark32);border-radius:var(--xyd-border-radius-large);padding:12px 16px;gap:12px;cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s;font:inherit;min-height:52px;}.d1vhwytf button[part="dropdown-trigger"]:hover,.d1vhwytf button[part="dropdown-trigger"][data-state="open"]{border-color:var(--dark32);background:var(--dark16);}.d1vhwytf span[part="dropdown-icon"]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--dark32);border-radius:var(--xyd-border-radius-medium);}.d1vhwytf span[part="dropdown-label-group"]{display:flex;flex-direction:column;flex:1;min-width:0;text-align:left;}.d1vhwytf span[part="dropdown-label"]{font-weight:var(--xyd-font-weight-semibold);color:var(--dark100);font-size:var(--xyd-font-size-small);line-height:var(--xyd-line-height-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}.d1vhwytf span[part="dropdown-description"]{font-size:var(--xyd-font-size-xsmall);line-height:var(--xyd-line-height-xsmall);color:var(--dark60);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.d1vhwytf span[part="dropdown-chevron"]{margin-left:12px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform 0.1s ease;}.d1vhwytf button[part="dropdown-trigger"] span[part="dropdown-chevron"]{transform:rotate(90deg);}.d1vhwytf button[part="dropdown-trigger"][data-state="open"] span[part="dropdown-chevron"]{transform:rotate(270deg);}.d1vhwytf [part="dropdown-list"]{background:var(--white);border-radius:var(--xyd-border-radius-large);padding:8px;width:var(--radix-popover-trigger-width);border:1px solid var(--dark32);margin-top:4px;z-index:999;opacity:0;pointer-events:none;transform:translateY(-4px);animation-duration:150ms;animation-timing-function:ease-out;animation-fill-mode:both;}.d1vhwytf [part="dropdown-list"][data-state="open"]{opacity:1;pointer-events:auto;animation-name:fadeIn-d1vhwytf;transform:translateY(0);}.d1vhwytf [part="dropdown-list"][data-state="closed"]{opacity:0;pointer-events:none;animation-name:fadeOut-d1vhwytf;transform:translateY(-4px);}.d1vhwytf [part="dropdown-listitem"]{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;background:none;border:none;width:100%;font:inherit;transition:background 0.15s;border-radius:10px;}.d1vhwytf [part="dropdown-listitem"]:hover{background:var(--dark16);}}
+
+@layer defaults{.s4ah3ok{overflow:auto;align-items:center;background-color:var(--xyd-subnav-bgcolor);border-radius:0.50rem;display:flex;flex-direction:row;width:100%;height:var(--xyd-subnav-height);margin-top:3px;padding:0 var(--xyd-padding-large);}.s4ah3ok [part="list"] xyd-subnav-item:first-of-type{padding-left:0;}.s4ah3ok [part="prefix"]{color:var(--xyd-subnav-prefix-color);font-weight:var(--xyd-font-weight-semibold);position:relative;padding:0 var(--xyd-sidebar-item-padding-total);}.s4ah3ok [part="prefix"]:after{background:var(--xyd-subnav-prefix-marker-color);border-radius:1px;content:" ";height:12px;position:absolute;right:0px;top:50%;transform:translateY(-50%);width:2px;}.s4ah3ok [part="list"]{display:flex;flex-direction:row;height:100%;}.s4ah3ok [part="list"]:has(:not([part="prefix"])){padding:0 var(--xyd-sidebar-item-padding-total);}@media (max-width: 1024px){.s4ah3ok [part="list"]:has(:not([part="prefix"])){padding:0 var(--xyd-nav-padding);}}}
+@layer defaults{.s1ncaln9{display:flex;height:100%;align-items:center;position:relative;padding:var(--xyd-nav-item-padding-y) var(--xyd-nav-item-padding);}.s1ncaln9[data-state="active"]{font-weight:var(--xyd-font-weight-semibold);}.s1ncaln9[data-state="active"] a{color:var(--xyd-subnav-item-color--active);}.s1ncaln9[data-state="active"] a:after{background-color:var(--xyd-subnav-item-color--active-mark);border-radius:1px;bottom:0;content:" ";height:2px;left:0;position:absolute;width:100%;bottom:calc(var(--xyd-nav-item-padding-y) * -1);}.s1ncaln9 [part="link"]{color:var(--xyd-subnav-item-color);display:flex;height:100%;align-items:center;position:relative;}.s1ncaln9 [part="link"]:hover{color:var(--xyd-subnav-item-color--active);}}
+
+@layer defaults{.t19g75q2{position:relative;padding-left:16px;display:block;}.t19g75q2 [part="scroller"]{position:absolute;top:0;bottom:0;left:0;width:2px;background-color:var(--xyd-toc-bgcolor);}.t19g75q2 [part="scroll"]{position:absolute;top:0;left:0;width:2px;height:var(--xyd-toc-active-track-height);transform:translateY(var(--xyd-toc-active-track-top));background-color:var(--xyd-toc-scroll-bgcolor);transition:height .4s cubic-bezier(.19, 1, .22, 1),transform .4s cubic-bezier(.19, 1, .22, 1);}.t19g75q2 [part="list"]{margin:0;padding:0;list-style:none;}}
+@layer defaults{.teg7kxf{position:relative;margin:0 0 12px;padding:0;}.teg7kxf [part="link"]{display:inline-block;color:var(--xyd-toc-item-color);text-wrap:pretty;transition:color .15s ease;padding-left:0;}.teg7kxf [part="link"]:hover{color:var(--xyd-toc-item-color--active);}.teg7kxf[data-active="true"] [part="link"]{color:var(--xyd-toc-item-color--active);font-weight:var(--xyd-font-weight-semibold);}.teg7kxf[data-depth="1"] [part="link"]{padding-left:16px;}.teg7kxf[data-depth="2"] [part="link"]{padding-left:32px;}.teg7kxf[data-depth="3"] [part="link"]{padding-left:48px;}.teg7kxf[data-depth="4"] [part="link"]{padding-left:64px;}.teg7kxf[data-depth="5"] [part="link"]{padding-left:80px;}}

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+import React from 'react';
+
+interface NavProps {
+    children: React.ReactNode;
+    logo?: React.ReactNode;
+    className?: string;
+    leftSurface?: React.ReactNode;
+    centerSurface?: React.ReactNode;
+    rightSurface?: React.ReactNode;
+    floatRightSurface?: React.ReactNode;
+    appearance?: {
+        separator?: "right";
+    };
+}
+declare function Nav(props: NavProps): React.JSX.Element;
+declare namespace Nav {
+    var Tabs: ({ children, value, onChange }: TabsProps) => React.JSX.Element;
+    var Item: (props: NavItemProps) => React.JSX.Element;
+    var ItemRaw: ({ children, href, as, ...rest }: Omit<NavItemProps, "value">) => React.JSX.Element;
+}
+interface TabsProps {
+    children: React.ReactNode;
+    value: string;
+    onChange?: (value: string) => void;
+}
+interface NavItemProps {
+    children: React.ReactNode;
+    href?: string;
+    value?: string;
+    as?: React.ElementType;
+}
+
+interface ProgressBarProps {
+    className?: string;
+    isActive?: boolean;
+}
+declare function ProgressBar({ className, isActive }: ProgressBarProps): React.JSX.Element;
+
+interface UISidebarProps {
+    children: React.ReactNode;
+    footerItems?: React.ReactNode;
+    className?: string;
+    scrollShadow?: boolean;
+    scrollTransition?: "smooth" | "instant";
+}
+declare function UISidebar({ children, footerItems, className, scrollShadow, scrollTransition }: UISidebarProps): React.JSX.Element;
+declare namespace UISidebar {
+    var ItemGroup: ({ children }: {
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    var Item: ({ children, button, href, active, activeTheme, isParentActive, ghost, icon, group, onClick, }: UISidebarItemProps) => React.JSX.Element;
+    var ItemHeader: ({ children, icon }: UISidebarItemHeaderProps) => React.JSX.Element;
+    var ItemBody: ({ title, right }: UISidebarItemBody) => React.JSX.Element;
+    var SubTree: ({ children, isOpen }: UISidebarSubTreeProps) => React.JSX.Element;
+}
+interface UISidebarItemProps {
+    children: React.ReactNode;
+    button?: boolean;
+    href?: string;
+    active?: boolean;
+    activeTheme?: "secondary";
+    isParentActive?: boolean;
+    ghost?: boolean;
+    icon?: React.ReactNode;
+    group?: false;
+    onClick?: (v: any) => void;
+}
+interface UISidebarItemHeaderProps {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface UISidebarItemBody {
+    title: React.ReactNode;
+    right?: React.ReactNode;
+}
+interface UISidebarSubTreeProps {
+    children: React.ReactNode;
+    isOpen?: boolean;
+}
+
+interface SidebarTabsDropdownOption {
+    label: string;
+    value: string;
+    description?: string;
+    icon?: React.ReactNode | string;
+}
+interface SidebarTabsDropdownProps {
+    options: SidebarTabsDropdownOption[];
+    value: string;
+}
+declare function SidebarTabsDropdown({ options, value }: SidebarTabsDropdownProps): React.JSX.Element;
+
+interface SubNavProps {
+    children: React.ReactNode;
+    title: string;
+    value: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare function SubNav({ children, title, value, onChange, className }: SubNavProps): React.JSX.Element;
+declare namespace SubNav {
+    var Item: ({ children, value, href, as }: SubNavItemProps) => React.JSX.Element;
+}
+interface SubNavItemProps {
+    children: React.ReactNode;
+    value: string;
+    href?: string;
+    as?: React.ElementType;
+}
+
+interface TocProps {
+    children: React.ReactNode;
+    defaultValue?: string;
+    className?: string;
+    maxDepth?: number;
+}
+declare function Toc({ children, defaultValue, className, maxDepth }: TocProps): React.JSX.Element;
+declare namespace Toc {
+    var Item: ({ children, id, className, depth }: TocItemProps) => React.JSX.Element;
+}
+interface TocItemProps {
+    children: React.ReactNode;
+    id: string;
+    className?: string;
+    depth?: number;
+}
+
+interface ITOC {
+    depth: number;
+    value: string;
+    id: string;
+    children: ITOC[];
+}
+interface IBreadcrumb {
+    title: string;
+    href: string;
+}
+interface INavLinks {
+    prev?: {
+        title: string;
+        href: string;
+    };
+    next?: {
+        title: string;
+        href: string;
+    };
+}
+
+export { Nav, ProgressBar, SidebarTabsDropdown, SubNav, Toc, UISidebar };
+export type { IBreadcrumb, INavLinks, ITOC, NavItemProps, NavProps, SubNavProps, TocItemProps, TocProps, UISidebarItemHeaderProps, UISidebarItemProps, UISidebarProps };