@newlogic-digital/ui 4.0.0 → 4.3.0-next.1

package/src/styles/theme/main.css

@@ -1,35 +1,30 @@
-@import "winduum/src/theme/config/font.css";
-@import "winduum/src/theme/config/mask.css";
-@import "winduum/src/theme/config/radius.css";
-@import "winduum/src/theme/config/spacing.css";
-@import "winduum/src/theme/config/transition.css";
-@import "winduum/src/theme/config/z.css";
 @import "./dark.css";
 
-:root, :host {
-  --default-font-family: "Poppins", sans-serif;
+@theme {
+  --default-font-family: "Inter", sans-serif;
   --default-color-space: srgb;
   --default-color-scheme: inherit;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
-  --color-primary: #83cd4f;
-  --color-primary-foreground: var(--color-dark);
-  --color-main: #111315;
+  --color-primary: #076cff;
+  --color-primary-foreground: var(--color-light);
+  --color-main: #181818;
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 80%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 49%, var(--color-main-foreground));
   --color-body: #fff;
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 82%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 93%, var(--color-body-foreground));
   --color-light: #fff;
   --color-light-foreground: var(--color-dark);
-  --color-dark: #111315;
+  --color-dark: #181818;
   --color-dark-foreground: var(--color-light);
-  --color-success: #16a34a;
-  --color-error: #dc2626;
-  --color-warning: #eab308;
-  --color-info: #0ea5e9;
+  --color-success: #00c951;
+  --color-error: #e7000b;
+  --color-warning: #fcc800;
+  --color-info: #00bcff;
+  --container-width: 80rem;
 }

package/src/styles/tinymce.css

@@ -1,2 +1,3 @@
 @import "./theme/main.css";
 @import "./components/(ui)/Text.css";
+@import "tailwindcss/theme.css";

package/src/styles/utils/+.css

@@ -1,4 +1,3 @@
-@import "./container.css";
 @import "./index.css";
 @import "./reveal.css";
 @import "./scrollbar.css";

package/src/styles/utils/index.css

@@ -1,8 +1,27 @@
-@import "winduum/src/utilities/animation.css";
-@import "winduum/src/utilities/ripple/index.css";
-@import "winduum/src/utilities/skeleton/index.css";
-@import "winduum/src/utilities/underline.css";
-@import "winduum/src/utilities/swap/index.css";
-@import "winduum/src/utilities/spinner/default.css";
-@import "winduum/src/utilities/dot.css";
-@import "./+.css";
+@import "winduum/src/utilities/container/props/default.css" layer(theme);
+@import "winduum/src/utilities/ripple/keyframes/default.css";
+@import "winduum/src/utilities/skeleton/props/default.css" layer(theme);
+@import "winduum/src/utilities/spinner/keyframes/ring.css";
+@import "winduum/tailwindcss/utilities/index.css";
+
+@layer theme {
+  :root,
+  :host {
+    --container-width: 82rem;
+    --container-padding: 1.25rem;
+  }
+
+  @media (--media-md) {
+    :root,
+    :host {
+      --container-padding: 2rem;
+    }
+  }
+
+  @media (--media-lg) {
+    :root,
+    :host {
+      --container-padding: 4rem;
+    }
+  }
+}

package/src/styles/utils/reveal.css

@@ -1,22 +1,21 @@
-.reveal {
+@utility reveal {
   opacity: 0;
   transition-property: var(--default-transition-property);
   transition-timing-function: var(--ease-in-out);
   transition-duration: 0.75s;
   will-change: transform;
 
-  @media (prefers-reduced-motion) {
+  @media (prefers-reduced-motion), (scripting: none), print {
     opacity: 1;
-    transform: none;
+    scale: none;
+    translate: none;
+    rotate: none;
   }
 
-  @media print {
+  &:is([data-in]) {
     opacity: 1;
-    transform: none;
-  }
-
-  &:is([data-in]), .no-js & {
-    opacity: 1;
-    transform: none;
+    scale: none;
+    translate: none;
+    rotate: none;
   }
 }

package/src/styles/utils/scrollbar.css

@@ -1,4 +1,4 @@
-.no-scrollbar {
+@utility no-scrollbar {
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -6,7 +6,7 @@
   }
 }
 
-.scrollbar {
+@utility scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) var(--color-body-primary);
   overscroll-behavior: contain;

package/src/templates/components/(example)/ControlSelect.latte

@@ -0,0 +1,26 @@
+<div class="x-control w-full max-w-80 mx-auto" tabindex="-1" data-controller="x-control-select">
+    <select>
+        <option value="0">Doporučujeme</option>
+        <option value="1">Nejprodávanější</option>
+        <option value="2">Od nejlevnějšího</option>
+        <option value="3">Od nejdražšího</option>
+        <option value="4">Nejnovější</option>
+    </select>
+    <div aria-hidden="true" class="max-h-80">
+        <div data-option="0" tabindex="0" data-active>Doporučujeme</div>
+        <div data-option="1" tabindex="0">Nejprodávanější</div>
+        <div data-option="2" tabindex="0">Od nejlevnějšího</div>
+        <div data-option="3" tabindex="0">Od nejdražšího</div>
+        <div data-option="4" tabindex="0">Nejnovější</div>
+    </div>
+</div>
+<div><br></div>
+<div class="x-control w-full max-w-80 mx-auto">
+    <select>
+        <option value="0">Doporučujeme</option>
+        <option value="1">Nejprodávanější</option>
+        <option value="2">Od nejlevnějšího</option>
+        <option value="3">Od nejdražšího</option>
+        <option value="4">Nejnovější</option>
+    </select>
+</div>

package/src/templates/components/(example)/PopoverAutocomplete.latte

@@ -0,0 +1,27 @@
+<div class="x-popover trigger-focus group mx-auto w-80" data-controller="x-popover">
+    <div class="x-control w-full">
+        <input
+            data-action="input->x-popover#autocomplete"
+            data-x-popover-target="autocomplete"
+            type="search"
+            placeholder="Vyhledávání ..."
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-controls="popoverContent"
+            aria-haspopup="listbox"
+            aria-expanded="true"
+            value="Volba"
+        >
+    </div>
+    <div
+        class="x-popover-content center flex flex-col shadow dark:bg-body-secondary mt-2 p-2 gap-2 w-full empty:closed group-not-has-aria-expanded:closed"
+        data-x-popover-target="content"
+        role="listbox"
+        id="popoverContent"
+    >
+        <button id="option-1" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 1</button>
+        <button id="option-2" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 2</button>
+        <button id="option-3" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 3</button>
+    </div>
+</div>

package/src/templates/components/(ui)/Pagination.latte

@@ -0,0 +1,19 @@
+<nav n:class="'x-pagination flex gap-2', $classAttribute ?? ''" aria-label="{_'Stránkování'}">
+    <a
+        n:attr="href: $iterator->counter !== 4 ? '#'"
+        n:class="
+            'x-button square sm',
+            $iterator->first ? 'pointer-events-none' : 'muted'
+        "
+        n:foreach="range(1,5) as $item"
+        aria-current={$iterator->first ? 'page' : null}
+    >
+        {if $iterator->last}
+            8
+        {elseif $iterator->counter === 4}
+            ...
+        {else}
+            {$iterator->counter}
+        {/if}
+    </a>
+</nav>

package/src/templates/components/Example.latte

@@ -1,15 +1,14 @@
 <div class="grid grid-cols-container">
     <div class="p-4 bg-body-secondary rounded w-full max-w-xl mx-auto">
-        <h1 class="x-heading mb-4">Hello world!</h1>
+        <h1 class="x-heading lg mb-4">Hello world!</h1>
         <div class="x-text mb-4">Want to dig deeper into Newlogic UI?</div>
-
         <a href="https://ui.newlogic.cz/" class="x-link underline">Read the docs &rarr;</a>
     </div>
     <div class="flex justify-center mt-4">
         <button
-                class="x-button"
-                data-invoke-action="x-dialog#show"
-                data-invoke-url="/dialog/basic.json"
+            class="x-button"
+            data-invoke-action="x-dialog#show"
+            data-invoke-url="/dialog/basic.json"
         >
             Dialog Fetch Example
         </button>

package/src/templates/components/cookieconsent/CookieConsentDialog.latte

@@ -1,26 +1,17 @@
-{var $center = true}
-
-<dialog class="x-cookieconsent-dialog x-dialog {if $center}center{/if}" data-controller="x-cookieconsent-dialog">
-    <div class="x-dialog-content">
-        <div class="mt-2 mb-4 md:mb-6">
-            {if true}
-                <div class="x-image w-40 my-4">
-                    <img src="{placeholder(160, 46)}" alt="">
-                </div>
-            {/if}
-            <div class="x-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
-        </div>
-        <div class="x-text">
+<dialog class="x-cookieconsent-dialog x-dialog" data-controller="x-cookieconsent-dialog">
+    <div class="x-dialog-content max-w-md text-center p-6 lg:p-8">
+        <div class="x-heading max-md:text-2xl text-3xl mt-2 mb-6 md:mb-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        <div class="x-text max-md:text-sm">
             <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
             <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
         </div>
-        <div class="flex items-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+        <div class="flex items-center mt-8 md:mt-10 gap-4 flex-col">
             <div class="flex flex-col w-full">
                 <button class="x-button lg w-full" data-action="click->x-cookieconsent-dialog#approve">Ano, souhlasím</button>
             </div>
             <div class="flex w-full gap-4">
-                <a class="x-button ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
-                <button class="x-button ghosted lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
+                <a class="x-button bordered lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="x-button bordered lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
             </div>
         </div>
     </div>

package/src/templates/components/dialog/DialogBasic.latte

@@ -4,7 +4,7 @@
             <h2 class="x-heading">Dialog Basic</h2>
             <button class="x-button square ghosted accent-main" type="button" data-action="click->x-dialog#close">
                 <svg>
-                    <use href="#icon-x-mark"></use>
+                    <use href="#heroicons-outline/x-mark"></use>
                 </svg>
             </button>
         </div>

package/src/templates/emails/layouts/default.latte

@@ -16,14 +16,23 @@
         <meta name="supported-color-schemes" content="light dark">
     {/if}
 
-    <style type="text/css" n:syntax="off">
-      @import '/src/styles/emails/main.css';
-    </style>
+    <link rel="stylesheet" href="/src/styles/emails/main.css">
+
+    <script type="module" n:if="\VITE_SERVER">
+        if (import.meta.hot && window.location.search === '?send') {
+            import.meta.hot.send('my:send', {
+                filename: window.location.href,
+                content:
+                    new XMLSerializer().serializeToString(document.doctype) +
+                    document.documentElement.outerHTML.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+            })
+        }
+    </script>
 </head>
 <body>
     <table class="x-main w-full" align="center">
         <tr>
-            <td class="p-[20px]" align="center">
+            <td class="p-container" align="center">
                 <table class="x-main-body container">
                     {include '../../utils/sections.latte', sections => $body}
                 </table>

package/src/templates/layouts/default.latte

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html lang="{$lang}">
     <head>
         <meta charset="utf-8">
         <title>{$title}</title>
@@ -38,23 +38,27 @@
             <link n:foreach="$modulepreload as $url" href="{$url|asset}" rel="modulepreload">
         {/if}
 
-        <script>
+        <script n:if="false">
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
-            document.documentElement.classList.remove('no-js')
         </script>
 
         <script src="{$assets->js->main|asset}" type="module"></script>
 
         <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
+        <link rel="icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="apple-touch-icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>
     <body data-controller="x-app invoke" data-naja-snippet-append>
-        {include '../components/(layout)/Header.latte'}
+        {if isset($head)}
+            {include '../utils/sections.latte', sections => $head}
+        {/if}
         <main class="x-main view-transition-main">
             {include '../utils/sections.latte', sections => $body}
         </main>
-        {include '../components/(layout)/Footer.latte'}
+        {if isset($foot)}
+            {include '../utils/sections.latte', sections => $foot}
+        {/if}
 
         {if $cookieConsent}
             {include '../components/cookieconsent/CookieConsentDialog.latte'}
@@ -63,9 +67,5 @@
         <ol class="x-toaster items-end">
             {*include TEMPLATES_DIR . 'Components/(ui)/Toast.latte'*}
         </ol>
-
-        {if true} {* load only on first load in production *}
-            {fetch('/src/icons.svg')|noescape}
-        {/if}
     </body>
 </html>

package/vite.config.js

@@ -2,7 +2,11 @@ import { defineConfig } from 'vite'
 import core from '@newlogic-digital/core'
 
 export default defineConfig({
-    plugins: [
-        core()
-    ]
+  plugins: [
+    core({
+      css: {
+        transformer: 'lightningcss',
+      },
+    }),
+  ],
 })

package/src/icons.svg

@@ -1,8 +0,0 @@
-<svg class="hidden">
-    <symbol id="icon-exclamation-circle" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </symbol>
-    <symbol id="icon-x-mark" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-    </symbol>
-</svg>

package/src/styles/components/cookieconsent/+.css

@@ -1 +0,0 @@
-@import "./CookieConsentDialog.css";

package/src/styles/components/cookieconsent/CookieConsentDialog.css

@@ -1,17 +0,0 @@
-.x-cookieconsent-dialog {
-  .x-dialog-content {
-    max-width: 32rem;
-  }
-
-  &.center {
-    .x-dialog-content {
-      max-width: 26rem;
-      text-align: center;
-
-      & .x-image {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-}

package/src/styles/emails/+.css

@@ -1,5 +0,0 @@
-@import "./base/+.css";
-@import "./components/+.css";
-@import "./main.css";
-@import "./theme/+.css";
-@import "./utils/+.css";

package/src/styles/utils/container.css

@@ -1,5 +0,0 @@
-@import "winduum/src/utilities/container/index.css";
-
-:root, :host {
-  --container-width: 80rem;
-}