native-document 1.0.126 → 1.0.128

package/src/components/menu/MenuLink.js

@@ -0,0 +1,24 @@
+import MenuItem from "./MenuItem";
+
+
+export default function MenuLink(config) {
+    if(!(this instanceof MenuLink)) {
+        return new MenuLink(config);
+    }
+    MenuItem.call(this, config);
+}
+
+MenuLink.prototype = Object.create(MenuItem.prototype);
+MenuLink.prototype.constructor = MenuLink;
+
+
+MenuLink.defaultTemplate = null;
+
+MenuLink.use = function(template) {
+    MenuLink.defaultTemplate = template.menuLink;
+};
+
+MenuLink.prototype.target = function (target) {
+    this.$description.target = target;
+    return this;
+};

package/src/core/utils/property-accumulator.js

@@ -7,7 +7,7 @@ export const cssPropertyAccumulator = function(initialValue = {}) {
     return {
         add(key, value) {
             if(isArray) {
-                data.push(key+' :  '+value);
+                data.push(key+':  '+value);
                 return;
             }
             data[key] = value;

package/src/router/Router.js

@@ -118,6 +118,17 @@ export default function Router($options = {}) {
      * @returns {{route:Route, params:Object, query:Object, path:string}}
      */
     this.resolve = function(target) {
+        if(typeof target === 'string') {
+            const route = $routesByName[target];
+            if(route) {
+                return {
+                    route,
+                    params: [],
+                    query: [],
+                    path: route.url({ name: target })
+                };
+            }
+        }
         if(Validator.isJson(target)) {
             const route = $routesByName[target.name];
             if(!route) {

package/src/ui/components/button/button.css

@@ -0,0 +1,362 @@
+/* ─────────────────────────────────────────────
+   Button tokens
+   Dépend de : vars.css (colors, spacings, radius, fonts)
+───────────────────────────────────────────── */
+:root {
+    /* Sizes — hauteurs */
+    --btn-height-sm:        28px;
+    --btn-height-md:        36px;
+    --btn-height-lg:        44px;
+
+    /* Sizes — paddings horizontaux */
+    --btn-padding-sm:       var(--space-cozy) var(--space-cozy-comfortable);
+    --btn-padding-md:       var(--space-cozy) var(--space-comfortable);
+    --btn-padding-lg:       var(--space-cozy-comfortable) var(--space-relaxed);
+
+    /* Sizes — font */
+    --btn-font-size-sm:     var(--note-size);
+    --btn-font-size-md:     var(--description-size);
+    --btn-font-size-lg:     var(--text-size);
+
+    /* Sizes — icon */
+    --btn-icon-size-sm:     14px;
+    --btn-icon-size-md:     16px;
+    --btn-icon-size-lg:     18px;
+
+    /* Shape */
+    --btn-radius:           var(--radius-button);
+    --btn-radius-rounded:   var(--radius-x);
+    --btn-radius-pill:      var(--radius-pill);
+
+    /* Misc */
+    --btn-font-family:      var(--font);
+    --btn-font-weight:      500;
+    --btn-gap:              var(--space-cozy);
+    --btn-transition:       background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
+    --btn-disabled-opacity: 0.45;
+    --btn-loader-size:      14px;
+    --btn-border-width:     1px;
+
+    /* ── Variants ── */
+
+    /* Primary */
+    --btn-primary-bg:           var(--color-primary);
+    --btn-primary-bg-hover:     var(--color-primary-hover);
+    --btn-primary-color:        var(--white);
+    --btn-primary-border:       var(--color-primary);
+    --btn-primary-border-hover: var(--color-primary-hover);
+
+    /* Secondary */
+    --btn-secondary-bg:           var(--color-secondary);
+    --btn-secondary-bg-hover:     var(--color-secondary-hover);
+    --btn-secondary-color:        var(--color-secondary-text);
+    --btn-secondary-border:       var(--color-secondary);
+    --btn-secondary-border-hover: var(--color-secondary-hover);
+
+    /* Danger */
+    --btn-danger-bg:           var(--color-danger);
+    --btn-danger-bg-hover:     var(--color-danger-hover);
+    --btn-danger-color:        var(--white);
+    --btn-danger-border:       var(--color-danger);
+    --btn-danger-border-hover: var(--color-danger-hover);
+
+    /* Success */
+    --btn-success-bg:           var(--color-success);
+    --btn-success-bg-hover:     var(--color-success-hover);
+    --btn-success-color:        var(--white);
+    --btn-success-border:       var(--color-success);
+    --btn-success-border-hover: var(--color-success-hover);
+
+    /* Warning */
+    --btn-warning-bg:           var(--color-warning);
+    --btn-warning-bg-hover:     var(--color-warning-hover);
+    --btn-warning-color:        var(--white);
+    --btn-warning-border:       var(--color-warning);
+    --btn-warning-border-hover: var(--color-warning-hover);
+
+    /* Info */
+    --btn-info-bg:           var(--color-info);
+    --btn-info-bg-hover:     var(--color-info-hover);
+    --btn-info-color:        var(--white);
+    --btn-info-border:       var(--color-info);
+    --btn-info-border-hover: var(--color-info-hover);
+
+    /* Ghost */
+    --btn-ghost-bg:           var(--color-ghost);
+    --btn-ghost-bg-hover:     var(--color-ghost-hover);
+    --btn-ghost-color:        var(--color-ghost-text);
+    --btn-ghost-border:       transparent;
+    --btn-ghost-border-hover: transparent;
+
+    /* Link */
+    --btn-link-bg:           transparent;
+    --btn-link-bg-hover:     transparent;
+    --btn-link-color:        var(--color-link);
+    --btn-link-color-hover:  var(--color-link-hover);
+    --btn-link-border:       transparent;
+}
+
+/* ─────────────────────────────────────────────
+   Base
+───────────────────────────────────────────── */
+.btn {
+    display:          inline-flex;
+    align-items:      center;
+    justify-content:  center;
+    gap:              var(--btn-gap);
+    border:           var(--btn-border-width) solid transparent;
+    border-radius:    var(--btn-radius);
+    cursor:           pointer;
+    font-family:      var(--btn-font-family);
+    font-weight:      var(--btn-font-weight);
+    font-size:        var(--btn-font-size-md);
+    height:           var(--btn-height-md);
+    padding:          var(--btn-padding-md);
+    line-height:      1;
+    white-space:      nowrap;
+    text-decoration:  none;
+    outline:          none;
+    transition:       var(--btn-transition);
+    user-select:      none;
+    box-sizing:       border-box;
+    vertical-align:   middle;
+}
+
+/* ─────────────────────────────────────────────
+   Sizes
+───────────────────────────────────────────── */
+.btn--sm {
+    height:    var(--btn-height-sm);
+    padding:   var(--btn-padding-sm);
+    font-size: var(--btn-font-size-sm);
+}
+.btn--lg {
+    height:    var(--btn-height-lg);
+    padding:   var(--btn-padding-lg);
+    font-size: var(--btn-font-size-lg);
+}
+
+/* ─────────────────────────────────────────────
+   Shapes
+───────────────────────────────────────────── */
+.btn--rounded { border-radius: var(--btn-radius-rounded); }
+.btn--pill    { border-radius: var(--btn-radius-pill); }
+.btn--circle  {
+    border-radius: 50%;
+    padding:       0;
+    width:         var(--btn-height-md);
+}
+.btn--sm.btn--circle { width: var(--btn-height-sm); }
+.btn--lg.btn--circle { width: var(--btn-height-lg); }
+
+/* ─────────────────────────────────────────────
+   Block
+───────────────────────────────────────────── */
+.btn--block {
+    width:   100%;
+    display: flex;
+}
+
+/* ─────────────────────────────────────────────
+   Icon
+───────────────────────────────────────────── */
+.btn__icon {
+    display:     inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width:       var(--btn-icon-size-md);
+    height:      var(--btn-icon-size-md);
+}
+.btn--sm .btn__icon {
+    width:  var(--btn-icon-size-sm);
+    height: var(--btn-icon-size-sm);
+}
+.btn--lg .btn__icon {
+    width:  var(--btn-icon-size-lg);
+    height: var(--btn-icon-size-lg);
+}
+.btn--icon-top,
+.btn--icon-bottom { flex-direction: column; }
+
+/* ─────────────────────────────────────────────
+   Loader
+───────────────────────────────────────────── */
+.btn__loader {
+    display:          inline-block;
+    width:            var(--btn-loader-size);
+    height:           var(--btn-loader-size);
+    border:           2px solid currentColor;
+    border-top-color: transparent;
+    border-radius:    50%;
+    flex-shrink:      0;
+    animation:        btn-spin 0.6s linear infinite;
+}
+@keyframes btn-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ─────────────────────────────────────────────
+   States
+───────────────────────────────────────────── */
+.btn:disabled,
+.btn--disabled,
+.btn--loading {
+    opacity:        var(--btn-disabled-opacity);
+    cursor:         not-allowed;
+    pointer-events: none;
+}
+
+/* ─────────────────────────────────────────────
+   Variants
+───────────────────────────────────────────── */
+
+/* Primary */
+.btn--primary {
+    background:   var(--btn-primary-bg);
+    color:        var(--btn-primary-color);
+    border-color: var(--btn-primary-border);
+}
+.btn--primary:hover {
+    background:   var(--btn-primary-bg-hover);
+    border-color: var(--btn-primary-border-hover);
+}
+
+/* Secondary */
+.btn--secondary {
+    background:   var(--btn-secondary-bg);
+    color:        var(--btn-secondary-color);
+    border-color: var(--btn-secondary-border);
+}
+.btn--secondary:hover {
+    background:   var(--btn-secondary-bg-hover);
+    border-color: var(--btn-secondary-border-hover);
+}
+
+/* Danger */
+.btn--danger {
+    background:   var(--btn-danger-bg);
+    color:        var(--btn-danger-color);
+    border-color: var(--btn-danger-border);
+}
+.btn--danger:hover {
+    background:   var(--btn-danger-bg-hover);
+    border-color: var(--btn-danger-border-hover);
+}
+
+/* Success */
+.btn--success {
+    background:   var(--btn-success-bg);
+    color:        var(--btn-success-color);
+    border-color: var(--btn-success-border);
+}
+.btn--success:hover {
+    background:   var(--btn-success-bg-hover);
+    border-color: var(--btn-success-border-hover);
+}
+
+/* Warning */
+.btn--warning {
+    background:   var(--btn-warning-bg);
+    color:        var(--btn-warning-color);
+    border-color: var(--btn-warning-border);
+}
+.btn--warning:hover {
+    background:   var(--btn-warning-bg-hover);
+    border-color: var(--btn-warning-border-hover);
+}
+
+/* Info */
+.btn--info {
+    background:   var(--btn-info-bg);
+    color:        var(--btn-info-color);
+    border-color: var(--btn-info-border);
+}
+.btn--info:hover {
+    background:   var(--btn-info-bg-hover);
+    border-color: var(--btn-info-border-hover);
+}
+
+/* Ghost */
+.btn--ghost {
+    background:   var(--btn-ghost-bg);
+    color:        var(--btn-ghost-color);
+    border-color: var(--btn-ghost-border);
+}
+.btn--ghost:hover {
+    background:   var(--btn-ghost-bg-hover);
+    border-color: var(--btn-ghost-border-hover);
+}
+
+/* Link */
+.btn--link {
+    background:           var(--btn-link-bg);
+    color:                var(--btn-link-color);
+    border-color:         var(--btn-link-border);
+    text-decoration:      underline;
+    text-underline-offset: 2px;
+}
+.btn--link:hover {
+    color: var(--btn-link-color-hover);
+}
+
+/* ─────────────────────────────────────────────
+   Outline modifier
+───────────────────────────────────────────── */
+.btn--outline.btn--primary {
+    background:   transparent;
+    color:        var(--btn-primary-bg);
+    border-color: var(--btn-primary-bg);
+}
+.btn--outline.btn--primary:hover {
+    background: var(--btn-primary-bg);
+    color:      var(--btn-primary-color);
+}
+
+.btn--outline.btn--danger {
+    background:   transparent;
+    color:        var(--btn-danger-bg);
+    border-color: var(--btn-danger-bg);
+}
+.btn--outline.btn--danger:hover {
+    background: var(--btn-danger-bg);
+    color:      var(--btn-danger-color);
+}
+
+.btn--outline.btn--success {
+    background:   transparent;
+    color:        var(--btn-success-bg);
+    border-color: var(--btn-success-bg);
+}
+.btn--outline.btn--success:hover {
+    background: var(--btn-success-bg);
+    color:      var(--btn-success-color);
+}
+
+.btn--outline.btn--warning {
+    background:   transparent;
+    color:        var(--btn-warning-bg);
+    border-color: var(--btn-warning-bg);
+}
+.btn--outline.btn--warning:hover {
+    background: var(--btn-warning-bg);
+    color:      var(--btn-warning-color);
+}
+
+.btn--outline.btn--info {
+    background:   transparent;
+    color:        var(--btn-info-bg);
+    border-color: var(--btn-info-bg);
+}
+.btn--outline.btn--info:hover {
+    background: var(--btn-info-bg);
+    color:      var(--btn-info-color);
+}
+
+.btn--outline.btn--secondary {
+    background:   transparent;
+    color:        var(--btn-secondary-color);
+    border-color: var(--gray-lite-2);
+}
+.btn--outline.btn--secondary:hover {
+    background: var(--btn-secondary-bg);
+}

package/src/ui/components/button/button.render.js

@@ -0,0 +1,63 @@
+import { Button as NativeButton, Span } from 'native-document/elements';
+import { classPropertyAccumulator } from 'native-document/utils';
+import './button.css';
+
+/**
+ * @param {Button} instance
+ * @returns {HTMLElement}
+ */
+const ButtonRender = function(instance) {
+    const desc = instance.$description;
+
+    const classes = classPropertyAccumulator([
+        'btn',
+        `btn--${desc.variant || 'secondary'}`,
+        desc.outline          && 'btn--outline',
+        desc.block            && 'btn--block',
+        desc.size === 'small' && 'btn--sm',
+        desc.size === 'large' && 'btn--lg',
+        desc.borderRadiusType && `btn--${desc.borderRadiusType}`,
+    ].filter(Boolean));
+
+    classes.add('btn--loading',  desc.loading);
+    classes.add('btn--disabled', desc.disabled);
+
+    const content = buildContent(desc);
+
+    return NativeButton({
+        class:    classes.value(),
+        type:     desc.type || 'button',
+        disabled: desc.disabled,
+    }, content);
+};
+
+/**
+ * Construit le contenu du bouton
+ * icon + label + loader selon la configuration
+ */
+const buildContent = (desc) => {
+    const content = [];
+
+    if (desc.loading) {
+        content.push(Span({ class: 'btn__loader' }));
+    }
+
+    if (desc.icon && isIconBefore(desc.iconPosition)) {
+        content.push(Span({ class: 'btn__icon' }, desc.icon));
+    }
+
+    if (desc.label != null) {
+        content.push(Span({ class: 'btn__label' }, desc.label));
+    }
+
+    if (desc.icon && isIconAfter(desc.iconPosition)) {
+        content.push(Span({ class: 'btn__icon' }, desc.icon));
+    }
+
+    return content;
+};
+
+const isIconBefore = (position) => !position || position === 'left' || position === 'top';
+const isIconAfter  = (position) => position === 'right' || position === 'bottom';
+
+export default ButtonRender;

package/src/ui/theme.js

@@ -1,5 +1,6 @@
+import ButtonRender from "./components/button/button.render";
 
 
 export const DefaultTheme = {
-
+    Button: ButtonRender
 }

package/src/ui/tokens/animation.scss

@@ -0,0 +1,36 @@
+:root {
+  --fast: .2s;
+  --natural: .3s;
+  --medium: .5s;
+  --slow: 1s;
+  --very-slow: 5s;
+
+  --animate-very-fast: .2s;
+  --animate-fast: .5s;
+  --animate-relax: 1s;
+  --animate-slow: 2s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(15px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+
+@keyframes pulse-shadow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); /* Initial shadow (subtle or none) */
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); /* Shadow expands and fades */
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); /* Returns to initial state */
+  }
+}

package/src/ui/tokens/colors-dark.scss

@@ -0,0 +1,57 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --transparent: transparent;
+    --background: #242426;
+    --background-color: #242426;
+    --text-color: black;
+
+    --red: #ff4245;
+    --orange: #ff9230;
+    --yellow: #ffd600;
+    --green: #30d158;
+    --mint: #00dac3;
+    --teal: #00d2e0;
+    --cyan: #3cd3fe;
+    --blue: #0091ff;
+    --indigo: #6b5dff;
+    --purple: #db34f2;
+    --pink: #ff375f;
+    --brown: #b78a66;
+    --gray: #8e8e93;
+    --gray-lite-1: #636366;
+    --gray-lite-2: #48484a;
+    --gray-lite-3: #3a3a3c;
+    --gray-lite-4: #2c2c2e;
+    --gray-lite-5: #1c1c1e;
+    --white: #FFFFFF;
+    --black: #000000;
+    --sidereal-black: #0a0a0a;
+
+    --contrasted-red: #ff6165;
+    --contrasted-orange: #ffa056;
+    --contrasted-yellow: #fedf43;
+    --contrasted-green: #4ad968;
+    --contrasted-mint: #54dfcb;
+    --contrasted-teal: #3bddec;
+    --contrasted-cyan: #6dd9ff;
+    --contrasted-blue: #5cb8ff;
+    --contrasted-indigo: #a7aaff;
+    --contrasted-purple: #ea8dff;
+    --contrasted-pink: #ff8ac4;
+    --contrasted-brown: #dba679;
+    --contrasted-gray: #aeaeb2;
+    --contrasted-gray-lite-1: #7c7c80;
+    --contrasted-gray-lite-2: #545456;
+    --contrasted-gray-lite-3: #444446;
+    --contrasted-gray-lite-4: #363638;
+    --contrasted-gray-lite-5: #242426;
+  }
+}
+
+.light-mode {
+  color-scheme: light;
+}
+
+.dark-mode {
+  color-scheme: dark;
+}

package/src/ui/tokens/colors.scss

@@ -0,0 +1,54 @@
+:root {
+  --transparent: transparent;
+  --background: white;
+  --background-color: white;
+  --text-color: black;
+
+  --red: #ff383c;
+  --dark-red: #721c24;
+  --orange: #ff8d28;
+  --dark-orange: #ff8d28;
+  --yellow: #ffcc00;
+  --dark-yellow: #7e6c15;
+  --green: #34c759;
+  --dark-green: #155724;
+  --mint: #00c8b3;
+  --teal: #00c3d0;
+  --cyan: #00c0e8;
+  --blue: #0088ff;
+  --dark-lite-blue: #0c5460;
+  --dark-blue: #004085;
+  --indigo: #6155f5;
+  --purple: #cb30e0;
+  --pink: #ff2d55;
+  --brown: #ac7f5e;
+  --dark-brown: #856404;
+  --gray: #8e8e93;
+  --gray-lite-1: #aeaeb2;
+  --gray-lite-2: #c7c7cc;
+  --gray-lite-3: #d1d1d6;
+  --gray-lite-4: #e5e5ea;
+  --gray-lite-5: #f2f2f7;
+  --white: #ffffff;
+  --black: #000000;
+  --sidereal-black: #0a0a0a;
+
+  --contrasted-red: #e9152d;
+  --contrasted-orange: #c55300;
+  --contrasted-yellow: #a16a00;
+  --contrasted-green: #008932;
+  --contrasted-mint: #008575;
+  --contrasted-teal: #008198;
+  --contrasted-cyan: #007eae;
+  --contrasted-blue: #1e6ef4;
+  --contrasted-indigo: #564ade;
+  --contrasted-purple: #b02fc2;
+  --contrasted-pink: #e7124d;
+  --contrasted-brown: #956d51;
+  --contrasted-gray: #6c6c70;
+  --contrasted-gray-lite-1: #8e8e93;
+  --contrasted-gray-lite-2: #aeaeb2;
+  --contrasted-gray-lite-3: #bcbcc0;
+  --contrasted-gray-lite-4: #d8d8dc;
+  --contrasted-gray-lite-5: #ebebf0;
+}

package/src/ui/tokens/components.scss

@@ -0,0 +1,32 @@
+.tag {
+  display: inline-block;
+  background: var(--gray-lite-3);
+  color: var(--white);
+  padding: var(--space-tiny) var(--space-comfortable);
+  border-radius: var(--radius-pill);
+}
+.spacer {
+  flex: 1;
+}
+.hidden {
+  display: none;
+}
+.note {
+  font-size: var(--note-size);
+}
+.hint {
+  font-size: var(--hint-size);
+}
+.right-footer-options {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: var(--space-cozy);
+  align-items: center;
+  align-content: center;
+}
+.no-margin {
+  margin: 0 !important;
+}
+.no-padding {
+  padding: 0 !important;
+}