native-document 1.0.165 → 1.0.168

package/src/ui/components/list/item/list-item.css

@@ -0,0 +1,191 @@
+:root {
+    --list-item-padding-v:              9px;
+    --list-item-padding-h:              14px;
+    --list-item-gap:                    10px;
+    --list-item-font-size:              var(--description-size);
+    --list-item-color:                  var(--text-color);
+    --list-item-bg-hover:               var(--gray-lite-5);
+    --list-item-bg-selected:            color-mix(in srgb, var(--blue) 8%, transparent);
+    --list-item-color-selected:         var(--blue);
+    --list-item-weight-selected:        500;
+    --list-item-disabled-opacity:       0.45;
+    --list-item-transition:             background 0.1s ease;
+
+    --list-item-subtitle-size:          var(--note-size);
+    --list-item-subtitle-color:         var(--gray);
+
+    --list-item-trailing-size:          var(--note-size);
+    --list-item-trailing-color:         var(--gray);
+
+    --list-item-icon-size:              16px;
+    --list-item-icon-color:             var(--gray);
+
+    --list-item-checkbox-size:          15px;
+    --list-item-checkbox-radius:        4px;
+    --list-item-checkbox-border:        var(--gray-lite-2);
+    --list-item-checkbox-bg:            var(--blue);
+
+    --list-item-indicator-size:         12px;
+
+    --list-item-swipe-transition:       transform 0.2s ease-out;
+    --list-item-swipe-leading-bg:       var(--color-success);
+    --list-item-swipe-trailing-bg:      var(--color-danger);
+    --list-item-swipe-actions-min-width: 80px;
+}
+
+/* ── Base ───────────────────────────────────────────────────── */
+
+.list-item {
+    position:   relative;
+    list-style: none;
+    font-size:  var(--list-item-font-size);
+    color:      var(--list-item-color);
+    overflow:   hidden;
+
+    &.is-disabled {
+        opacity:        var(--list-item-disabled-opacity);
+        cursor:         not-allowed;
+        pointer-events: none;
+    }
+
+    &.is-hidden {
+        display: none;
+    }
+}
+
+/* ── Content (front layer) ──────────────────────────────────── */
+
+.list-item-content {
+    position:   relative;
+    z-index:    1;
+    display:    flex;
+    align-items: center;
+    gap:        var(--list-item-gap);
+    padding:    var(--list-item-padding-v) var(--list-item-padding-h);
+    cursor:     pointer;
+    background: var(--list-bg);
+    transition: var(--list-item-transition);
+
+    .list-item:hover & {
+        background: var(--list-item-bg-hover);
+    }
+
+    .list-item.is-selected & {
+        background: var(--list-item-bg-selected);
+        color:      var(--list-item-color-selected);
+
+        .list-item-label {
+            font-weight: var(--list-item-weight-selected);
+        }
+    }
+
+    .list-item.is-swipeable & {
+        transition: transform 0.05s linear, background var(--fast);
+    }
+}
+
+/* ── Slots ──────────────────────────────────────────────────── */
+
+.list-item-icon {
+    font-size:   var(--list-item-icon-size);
+    color:       var(--list-item-icon-color);
+    flex-shrink: 0;
+    display:     flex;
+    align-items: center;
+}
+
+.list-item-body {
+    flex:           1;
+    min-width:      0;
+    display:        flex;
+    flex-direction: column;
+    gap:            2px;
+}
+
+.list-item-label {
+    white-space:   nowrap;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
+
+.list-item-subtitle {
+    font-size:     var(--list-item-subtitle-size);
+    color:         var(--list-item-subtitle-color);
+    white-space:   nowrap;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+}
+
+.list-item-trailing {
+    flex-shrink: 0;
+    font-size:   var(--list-item-trailing-size);
+    color:       var(--list-item-trailing-color);
+}
+
+/* ── Checkbox ───────────────────────────────────────────────── */
+
+.list-item-checkbox {
+    flex-shrink:      0;
+    width:            var(--list-item-checkbox-size);
+    height:           var(--list-item-checkbox-size);
+    border-radius:    var(--list-item-checkbox-radius);
+    border:           1.5px solid var(--list-item-checkbox-border);
+    background:       transparent;
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    font-size:        10px;
+    transition:       background 0.1s ease, border-color 0.1s ease;
+
+    &.is-checked {
+        background:   var(--list-item-checkbox-bg);
+        border-color: var(--list-item-checkbox-bg);
+        color:        white;
+    }
+}
+
+/* ── Select indicator (selectByClick) ───────────────────────── */
+
+.list-item-indicator {
+    opacity:     0;
+    flex-shrink: 0;
+    font-size:   var(--list-item-indicator-size);
+    color:       var(--list-item-color-selected);
+    transition:  opacity 0.1s ease;
+
+    &.is-visible {
+        opacity: 1;
+    }
+}
+
+/* ── Swipe ──────────────────────────────────────────────────── */
+
+.list-item-swipe-background {
+    position: absolute;
+    inset:    0;
+    display:  flex;
+    z-index:  0;
+}
+
+.swipe-actions-container {
+    display:        flex;
+    align-items:    center;
+    min-width:      var(--list-item-swipe-actions-min-width);
+
+    &.container-leading {
+        justify-content: flex-start;
+    }
+
+    &.container-trailing {
+        justify-content: flex-end;
+        margin-left:     auto;
+    }
+
+    &.container-trailing,
+    &.container-leading {
+        > * {
+            height: 100%;
+            border-radius: 0;
+        }
+    }
+}

package/src/ui/components/list/list.css

@@ -0,0 +1,24 @@
+:root {
+    --list-bg:              var(--background);
+    --list-border:          var(--gray-lite-3);
+    --list-radius:          var(--radius-card);
+    --list-padding:         0;
+    --list-inset-padding:   0px;
+}
+
+.list {
+    background:    var(--list-bg);
+    border:        1px solid var(--list-border);
+    border-radius: var(--list-radius);
+    padding:       var(--list-padding);
+    overflow:      hidden;
+    list-style:    none;
+    &.with-divider {
+        li {
+            border-bottom: solid 1px var(--list-border, #e0e0e0);
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+}

package/src/ui/components/menu/MenuDividerRender.js

@@ -8,5 +8,5 @@ export default function MenuDividerRender($desc, instance) {
     const props = instance.getEditableProps();
     props.class.add('menu-divider');
 
-    return ListItem(Div( { ...instance.resolveProps(), role: "separator" }));
+    return ListItem(Div( { ...instance.resolveProps(), role: 'separator' }));
 }

package/src/ui/components/menu/MenuGroupRender.js

@@ -43,9 +43,9 @@ const buildGroupHeader = ($desc, instance) => {
         const closedIcon = $desc.collapsableOpenedIcon || '▾';
         const openedIcon = $desc.collapsableClosedIcon || '';
         content.push(
-            Span({ class: $desc.collapsed?.transform(c => 'menu-group-chevron' + (c ? '' : ' is-open')), },
-                Switch($desc.collapsed, openedIcon, closedIcon)
-            )
+            Span({ class: $desc.collapsed?.transform(c => 'menu-group-chevron' + (c ? '' : ' is-open')) },
+                Switch($desc.collapsed, openedIcon, closedIcon),
+            ),
         );
     }
 

package/src/ui/components/menu/MenuItemRender.js

@@ -1,7 +1,7 @@
 import {Div, ListItem, Span } from '../../../core/elements';
 import ShortcutManager from '../../../core/utils/shortcut-manager';
-import { $ } from '../../../core/data/Observable'
-import {buildSubmenu, setupInteraction} from "./helpers";
+import { $ } from '../../../core/data/Observable';
+import {buildSubmenu, setupInteraction} from './helpers';
 
 export default function MenuItemRender($desc, instance) {
     if($desc.render) {

package/src/ui/components/menu/MenuLinkRender.js

@@ -1,8 +1,8 @@
-import {Link, ListItem, Span} from "../../../core/elements";
+import {Link, ListItem, Span} from '../../../core/elements';
 import { Link as RouterLink } from '../../../../router';
-import ShortcutManager from "../../../core/utils/shortcut-manager";
+import ShortcutManager from '../../../core/utils/shortcut-manager';
 import { $ } from '../../../core/data/Observable';
-import {buildSubmenu, setupInteraction} from "./helpers";
+import {buildSubmenu, setupInteraction} from './helpers';
 
 export default function MenuLinkRender($desc, instance) {
     if($desc.render) {

package/src/ui/components/menu/helpers.js

@@ -1,12 +1,12 @@
-import {Div, ForEachArray, UnorderedList} from "../../../core/elements";
-import {computePosition, flip, offset, shift} from "@floating-ui/dom";
+import {Div, ForEachArray, UnorderedList} from '../../../core/elements';
+import {computePosition, flip, offset, shift} from '@floating-ui/dom';
 
 export const buildSubmenu = ($desc, orientation, $isOpen, instance) => {
     const root     = instance.getRoot();
     const $compact = root.$description?.compact;
     if(orientation === 'inline') {
         const submenuEl = Div({ class: 'sub-menu', 'is-open': $isOpen, 'is-inline': $compact.is(false), 'is-vertical': $compact},
-            UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items))
+            UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items)),
         );
 
         $compact?.subscribe((isCompact) => {
@@ -25,7 +25,7 @@ export const buildSubmenu = ($desc, orientation, $isOpen, instance) => {
     }
 
     return Div({class: 'sub-menu is-' + orientation, 'is-open': $isOpen, style: {position: 'fixed', left: '0px', top: '0px'}},
-        UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items))
+        UnorderedList({class: 'sub-menu-container'}, ForEachArray($desc.items)),
     );
 };
 

package/src/ui/components/modal/ModalRender.js

@@ -1,7 +1,7 @@
 import {Dialog, Div, Span} from '../../../core/elements';
 import Button from '../../../components/button/Button';
-import {ElementCreator} from "../../../core/wrappers/ElementCreator";
-import {createPortal} from "../../../core/elements/anchor/anchor";
+import {ElementCreator} from '../../../core/wrappers/ElementCreator';
+import {createPortal} from '../../../core/elements/anchor/anchor';
 
 import './modal.css';
 
@@ -69,13 +69,13 @@ export default function ModalRender($desc, instance) {
 const buildHeader = ($desc, instance) => {
     const content = [];
 
-    content.push(Div({class: 'modal-title'}, $desc.title))
+    content.push(Div({class: 'modal-title'}, $desc.title));
 
     if($desc.closable) {
         content.push(
             Button('×', {class: 'modal-close'})
                 .ghost()
-                .nd.onClick(() => instance.close())
+                .nd.onClick(() => instance.close()),
         );
     }
 

package/src/ui/components/pagination/PaginationRender.js

@@ -20,8 +20,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.first(),
                 $desc,
                 'renderFirst',
-                $isFirstPage
-            )
+                $isFirstPage,
+            ),
         );
     }
 
@@ -32,8 +32,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.previous(),
                 $desc,
                 'renderPrevious',
-                $isFirstPage
-            )
+                $isFirstPage,
+            ),
         );
     }
 
@@ -46,8 +46,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.next(),
                 $desc,
                 'renderNext',
-                $isLastPage
-            )
+                $isLastPage,
+            ),
         );
     }
 
@@ -58,8 +58,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.last(),
                 $desc,
                 'renderLast',
-                $isLastPage
-            )
+                $isLastPage,
+            ),
         );
     }
 
@@ -85,7 +85,7 @@ const buildPages = ($desc, instance) => {
                 return buildEllipsis($desc);
             }
             return buildPage(page, $desc, instance);
-        })
+        }),
     );
 };
 

package/src/ui/components/popover/PopoverRender.js

@@ -26,7 +26,7 @@ const PLACEMENT_MAP = {
 };
 
 const supportsPopover = () => {
-    return Object.hasOwn(HTMLElement.prototype, "popover");
+    return Object.hasOwn(HTMLElement.prototype, 'popover');
 };
 
 export default function PopoverRender($desc, instance, classPrefix = 'popover') {
@@ -41,7 +41,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
     const $x        = Observable(10).intercept(toUnit);
     const $y        = Observable(0).intercept(toUnit);
 
-    let popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
+    const popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
 
     editableProps.class.add(classPrefix);
     editableProps.class.add('is-'+$desc.variant);
@@ -51,7 +51,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
         popover: 'manual',
         role:    'dialog',
         id:      popoverId,
-        ...instance.resolveProps()
+        ...instance.resolveProps(),
     }, [
         buildContent($desc, instance, classPrefix),
         popoverArrow,
@@ -94,7 +94,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
                 middleware.push(size({
                     apply({rects, elements}) {
                         elements.floating.style.width = rects.reference.width + 'px';
-                    }
+                    },
                 }));
             }
 
@@ -211,21 +211,21 @@ const buildContent = ($desc, instance, classPrefix = 'popover') => {
     if($desc.renderHeader || $desc.header) {
         content.push(Div({class: classPrefix+'-header'}, $desc.renderHeader
             ? $desc.renderHeader($desc, instance)
-            : $desc.header
+            : $desc.header,
         ));
     }
 
     if($desc.renderContent || $desc.content) {
         content.push(Div({class: classPrefix+'-body'}, $desc.renderContent
             ? $desc.renderContent($desc, instance)
-            : $desc.content
+            : $desc.content,
         ));
     }
 
     if($desc.renderFooter || $desc.footer) {
         content.push(Div({class: classPrefix+'-footer'}, $desc.renderFooter
             ? $desc.renderFooter($desc, instance)
-            : $desc.footer
+            : $desc.footer,
         ));
     }
 

package/src/ui/components/progress/ProgressRender.js

@@ -93,35 +93,35 @@ const buildBar = ($desc, instance) => {
             Div({class: 'progress-header'}, [
                 $desc.label ? Span({class: 'progress-label'}, $desc.label) : null,
                 valueLabel  ? Span({class: 'progress-value'}, valueLabel)  : null,
-            ])
+            ]),
         );
     }
 
     content.push(
         Div({class: trackClass.join(' ')},
-            Div({class: fillClass.join(' '), style: fillStyle})
-        )
+            Div({class: fillClass.join(' '), style: fillStyle}),
+        ),
     );
 
     return Div(instance.resolveProps(), content);
-}
+};
 
 const CIRCLE_SIZES = {
     small: { size: 32, stroke: 2 },
     medium: { size: 64, stroke: 6 },
-    large: { size: 128, stroke: 10 }
+    large: { size: 128, stroke: 10 },
 };
 
 const getCircleSize = ($desc) => {
     if(typeof $desc.size === 'number') {
         return {
             size: $desc.size,
-            stroke: $desc.stroke || 3
+            stroke: $desc.stroke || 3,
         };
     }
 
     return CIRCLE_SIZES[$desc.size] || CIRCLE_SIZES.medium;
-}
+};
 
 const buildCircle = ($desc, instance) => {
     const circleSize = getCircleSize($desc);
@@ -141,7 +141,7 @@ const buildCircle = ($desc, instance) => {
             SvgCircle({
                 cx: size / 2, cy: size / 2, r: radius,
                 class: 'progress-circle-track',
-                'stroke-width': stroke
+                'stroke-width': stroke,
             }),
             SvgCircle({
                 cx: size / 2, cy: size / 2, r: radius,
@@ -150,12 +150,12 @@ const buildCircle = ($desc, instance) => {
                 'stroke-dasharray': circumference,
                 'stroke-dashoffset': offset,
                 'stroke-linecap': 'round',
-                transform: `rotate(-90 ${size / 2} ${size / 2})`
-            })
+                transform: `rotate(-90 ${size / 2} ${size / 2})`,
+            }),
         ]),
-        $desc.showValue ? Span({ class: 'progress-circle-label' }, getLabel($desc)) : null
+        $desc.showValue ? Span({ class: 'progress-circle-label' }, getLabel($desc)) : null,
     ]);
-}
+};
 
 const toUnit = (value) => {
     if(typeof value === 'number') {

package/src/ui/components/skeleton/SkeletonRender.js

@@ -1,6 +1,8 @@
 import {Div, Span} from '../../../core/elements';
 
 import './skeleton.css';
+import Skeleton from '../../../components/skeleton/Skeleton';
+import {HStack, VStack} from '../../../components/stacks';
 
 export default function SkeletonRender($desc, instance) {
     const props  = instance.getEditableProps();
@@ -77,4 +79,58 @@ const toUnit = (value) => {
         return value.transform(v => typeof v === 'number' ? v + 'px' : v);
     }
     return value;
+};
+
+
+/**
+ * @param {string} [type]
+ * @returns {*}
+ */
+Skeleton.card = function(type) {
+    return VStack([
+        Skeleton().type('image').height(200),
+        VStack([
+            Skeleton().text(1),
+            Skeleton().text(2),
+        ]).spacing('cozy'),
+    ], { class: 'skeleton-card '+type }).spacing('cozy');
+};
+
+/**
+ * @param {number} [items=3]
+ * @returns {*}
+ */
+Skeleton.list = function(items = 3) {
+    return VStack(
+        Array.from({length: items}, () =>
+            HStack([
+                Div({ class: 'skeleton-list-item-avatar' }, Skeleton().circle().size(40, 40)),
+                Div({ class: 'skeleton-list-item-text' }, Skeleton().text(2)),
+            ], { class: 'skeleton-list-item' }).spacing('comfortable').alignCenter(),
+        ),
+    ).spacing('comfortable');
+};
+
+/**
+ * @param {number} [rows=5]
+ * @param {number} [cols=4]
+ * @returns {*}
+ */
+Skeleton.table = function(rows = 5, cols = 4) {
+    const buildRow = () =>
+        HStack(
+            Array.from({length: cols}, () =>
+                Div({ class: 'skeleton-table-col' }, Skeleton().rect().height(16)),
+            ),
+            { class: 'skeleton-table-row' },
+        ).spacing('comfortable').alignCenter();
+
+    return VStack([
+        buildRow(),
+        ...Array.from({length: rows}, () => buildRow()),
+    ]).spacing('cozy');
+};
+
+Skeleton.paragraph = function(lines = 3) {
+    return Skeleton().text(lines);
 };

package/src/ui/components/spacer/SpacerRender.js

@@ -0,0 +1,10 @@
+import { Div } from '../../../core/elements';
+
+export default function SpacerRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('spacer');
+    props.style.add('flex', '1');
+
+    return Div(instance.resolveProps());
+}

package/src/ui/components/splitter/SplitterGutterRender.js

@@ -12,7 +12,7 @@ export default function SplitterGutterRender($desc, instance) {
     // });
 
     const gutter = Div(instance.resolveProps(),
-        Div({class: 'splitter-gutter-handle'})
+        Div({class: 'splitter-gutter-handle'}),
     );
 
     setupDrag(gutter, $desc, instance);

package/src/ui/components/splitter/SplitterPanelRender.js

@@ -24,7 +24,7 @@ const setupVerticalLimit = (props, $desc) => {
     }
 
     props.style.add('height', $desc.size.transform(toUnit));
-}
+};
 const setupHorizontalLimit = (props, $desc) => {
     if($desc.minSize) {
         props.style.add('minWidth', toUnit($desc.minSize));
@@ -33,6 +33,6 @@ const setupHorizontalLimit = (props, $desc) => {
         props.style.add('maxWidth', toUnit($desc.maxSize));
     }
     props.style.add('width', $desc.size.transform(toUnit));
-}
+};
 
 const toUnit = (value) => typeof value === 'number' ? value + 'px' : value;

package/src/ui/components/stacks/PositionStackRender.js

@@ -1,4 +1,4 @@
-import {Div} from "../../../core/elements";
+import {Div} from '../../../core/elements';
 
 import './position-stack.css';
 

package/src/ui/components/stacks/StackRender.js

@@ -1,4 +1,4 @@
-import {Div} from "../../../core/elements";
+import {Div} from '../../../core/elements';
 
 import './stack.css';
 

package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 const AbsoluteStackRender = PositionStackRender.bind(null, 'absolute-stack');
 

package/src/ui/components/stacks/fixed-stack/FixedStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 const FixedStackRender = PositionStackRender.bind(null, 'fixed-stack');
 

package/src/ui/components/stacks/h-stack/HStackRender.js

@@ -1,4 +1,4 @@
-import StackRender from "../StackRender";
+import StackRender from '../StackRender';
 
 import './h-stack.css';
 

package/src/ui/components/stacks/index.js

@@ -1,5 +1,5 @@
-export { default as VStackRender } from "./v-stack/VStackRender";
-export { default as HStackRender } from "./h-stack/HStackRender";
-export { default as AbsoluteStackRender } from "./absolute-stack/AbsoluteStackRender";
-export { default as RelativeStackRender } from "./relative-stack/RelativeStackRender";
-export { default as FixedStackRender } from "./fixed-stack/FixedStackRender";
+export { default as VStackRender } from './v-stack/VStackRender';
+export { default as HStackRender } from './h-stack/HStackRender';
+export { default as AbsoluteStackRender } from './absolute-stack/AbsoluteStackRender';
+export { default as RelativeStackRender } from './relative-stack/RelativeStackRender';
+export { default as FixedStackRender } from './fixed-stack/FixedStackRender';

package/src/ui/components/stacks/relative-stack/RelativeStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 import './relative-stack.css';
 

package/src/ui/components/stacks/v-stack/VStackRender.js

@@ -1,4 +1,4 @@
-import StackRender from "../StackRender";
+import StackRender from '../StackRender';
 
 import './v-stack.css';