@nxa-lab/nxa-ui 0.3.6

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@nxa-lab/nxa-ui",
+  "version": "0.3.6",
+  "peerDependencies": {
+    "@angular/cdk": ">21.1.3",
+    "@angular/common": ">21.1.3",
+    "@angular/compiler": ">21.1.3",
+    "@angular/core": ">21.1.3",
+    "@angular/forms": ">21.1.3",
+    "@angular/platform-browser": ">21.1.3",
+    "@angular/router": ">21.1.3",
+    "@ng-icons/bootstrap-icons": ">33.0.0",
+    "@ng-icons/core": ">33.0.0",
+    "@ng-icons/font-awesome": ">33.0.0",
+    "@ng-icons/heroicons": ">33.0.0",
+    "rxjs": "~7.8.2",
+    "uuid": "^13.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./styles/main.css": {
+      "style": "./styles/main.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/nxa-lab-nxa-ui.d.ts",
+      "default": "./fesm2022/nxa-lab-nxa-ui.mjs"
+    }
+  },
+  "module": "fesm2022/nxa-lab-nxa-ui.mjs",
+  "typings": "types/nxa-lab-nxa-ui.d.ts"
+}

package/styles/_layers.css

@@ -0,0 +1,5 @@
+@layer utilities {
+    .scroll-gutter {
+        scrollbar-gutter: auto;
+    }
+}

package/styles/_safelist.css

@@ -0,0 +1,133 @@
+/* Colors */
+@source inline('bg-{primary,secondary,accent,neutral,base,info,success,warning,error}');
+@source inline('text-{primary,secondary,accent,neutral,base,info,success,warning,error}');
+@source inline('border-{primary,secondary,accent,neutral,base,info,success,warning,error}');
+@source inline('ring-{primary,secondary,accent,neutral,base,info,success,warning,error}');
+
+/* Content colors */
+@source inline('bg-{primary,secondary,accent,neutral,base,info,success,warning,error}-content');
+@source inline('text-{primary,secondary,accent,neutral,base,info,success,warning,error}-content');
+@source inline('border-{primary,secondary,accent,neutral,base,info,success,warning,error}-content');
+@source inline('ring-{primary,secondary,accent,neutral,base,info,success,warning,error}-content');
+
+/* Checkbox / Toggle / Radio colors */
+@source inline('checkbox-{primary,secondary,accent,info,warning,error,success,neutral}');
+@source inline('toggle-{primary,secondary,accent,info,warning,error,success,neutral}');
+@source inline('radio-{primary,secondary,accent,info,warning,error,success,neutral}');
+
+/* Sizes for checkbox/toggle/radio */
+@source inline('checkbox-{xs,sm,md,lg}');
+@source inline('toggle-{xs,sm,md,lg}');
+@source inline('radio-{xs,sm,md,lg}');
+
+/* Sizes for buttons / inputs / labels / textarea / select */
+@source inline('btn-{xs,sm,md,lg}');
+@source inline('badge-{xs,sm,md,lg}');
+
+@source inline('input-{xs,sm,md,lg}');
+@source inline('select-{xs,sm,md,lg}');
+@source inline('textarea-{xs,sm,md,lg}');
+@source inline('label-{xs,sm,md,lg}');
+
+/* All colors for btn / input / select / textarea / label / range / alert */
+@source inline('btn-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('badge-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('input-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('select-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('textarea-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('label-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('range-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+@source inline('alert-{primary,secondary,accent,neutral,info,success,warning,error,base}');
+
+
+/* Dropdown */
+@source inline('swap swap-rotate fill-current dropdown dropdown-content dropdown-start dropdown-center dropdown-end dropdown-top dropdown-bottom dropdown-left dropdown-right dropdown-hover dropdown-open dropdown-close');
+
+/* progress api call */
+@source inline('progress w-full progress-accent hidden');
+/* Expansion Panel */
+@source inline('collapse');
+@source inline('collapse-open');
+@source inline('collapse-arrow');
+@source inline('collapse-title');
+@source inline('collapse-content');
+
+/* Tabs */
+
+/* Tabs container & styles */
+@source inline('tabs');
+@source inline('tabs-box');
+@source inline('tabs-border');
+@source inline('tabs-lift');
+@source inline('tabs-top');
+@source inline('tabs-bottom');
+
+/* Tab items */
+@source inline('tab');
+@source inline('tab-content');
+@source inline('tab-active');
+@source inline('tab-disabled');
+
+/* Tab sizes */
+@source inline('tabs-xs');
+@source inline('tabs-sm');
+@source inline('tabs-md');
+@source inline('tabs-lg');
+@source inline('tabs-xl');
+
+@source inline('label label-text');
+
+@source inline('m-0 m-px m-0.5 m-1 m-1.5 m-2 m-2.5 m-3 m-3.5 m-4 m-5 m-6 m-7 m-8 m-9 m-10 m-11 m-12 m-14 m-16 m-20 m-24 m-28 m-32 m-36 m-40 m-44 m-48 m-52 m-56 m-60 m-64 m-72 m-80 m-96');
+@source inline('mx-0 mx-px mx-0.5 mx-1 mx-1.5 mx-2 mx-2.5 mx-3 mx-3.5 mx-4 mx-5 mx-6 mx-7 mx-8 mx-9 mx-10 mx-11 mx-12 mx-14 mx-16 mx-20 mx-24 mx-28 mx-32 mx-36 mx-40 mx-44 mx-48 mx-52 mx-56 mx-60 mx-64 mx-72 mx-80 mx-96');
+@source inline('my-0 my-px my-0.5 my-1 my-1.5 my-2 my-2.5 my-3 my-3.5 my-4 my-5 my-6 my-7 my-8 my-9 my-10 my-11 my-12 my-14 my-16 my-20 my-24 my-28 my-32 my-36 my-40 my-44 my-48 my-52 my-56 my-60 my-64 my-72 my-80 my-96');
+@source inline('mt-0 mt-px mt-0.5 mt-1 mt-1.5 mt-2 mt-2.5 mt-3 mt-3.5 mt-4 mt-5 mt-6 mt-7 mt-8 mt-9 mt-10 mt-11 mt-12 mt-14 mt-16 mt-20 mt-24 mt-28 mt-32 mt-36 mt-40 mt-44 mt-48 mt-52 mt-56 mt-60 mt-64 mt-72 mt-80 mt-96');
+@source inline('mr-0 mr-px mr-0.5 mr-1 mr-1.5 mr-2 mr-2.5 mr-3 mr-3.5 mr-4 mr-5 mr-6 mr-7 mr-8 mr-9 mr-10 mr-11 mr-12 mr-14 mr-16 mr-20 mr-24 mr-28 mr-32 mr-36 mr-40 mr-44 mr-48 mr-52 mr-56 mr-60 mr-64 mr-72 mr-80 mr-96');
+@source inline('mb-0 mb-px mb-0.5 mb-1 mb-1.5 mb-2 mb-2.5 mb-3 mb-3.5 mb-4 mb-5 mb-6 mb-7 mb-8 mb-9 mb-10 mb-11 mb-12 mb-14 mb-16 mb-20 mb-24 mb-28 mb-32 mb-36 mb-40 mb-44 mb-48 mb-52 mb-56 mb-60 mb-64 mb-72 mb-80 mb-96');
+@source inline('ml-0 ml-px ml-0.5 ml-1 ml-1.5 ml-2 ml-2.5 ml-3 ml-3.5 ml-4 ml-5 ml-6 ml-7 ml-8 ml-9 ml-10 ml-11 ml-12 ml-14 ml-16 ml-20 ml-24 ml-28 ml-32 ml-36 ml-40 ml-44 ml-48 ml-52 ml-56 ml-60 ml-64 ml-72 ml-80 ml-96');
+@source inline('p-0 p-px p-0.5 p-1 p-1.5 p-2 p-2.5 p-3 p-3.5 p-4 p-5 p-6 p-7 p-8 p-9 p-10 p-11 p-12 p-14 p-16 p-20 p-24 p-28 p-32 p-36 p-40 p-44 p-48 p-52 p-56 p-60 p-64 p-72 p-80 p-96');
+@source inline('px-0 px-px px-0.5 px-1 px-1.5 px-2 px-2.5 px-3 px-3.5 px-4 px-5 px-6 px-7 px-8 px-9 px-10 px-11 px-12 px-14 px-16 px-20 px-24 px-28 px-32 px-36 px-40 px-44 px-48 px-52 px-56 px-60 px-64 px-72 px-80 px-96');
+@source inline('py-0 py-px py-0.5 py-1 py-1.5 py-2 py-2.5 py-3 py-3.5 py-4 py-5 py-6 py-7 py-8 py-9 py-10 py-11 py-12 py-14 py-16 py-20 py-24 py-28 py-32 py-36 py-40 py-44 py-48 py-52 py-56 py-60 py-64 py-72 py-80 py-96');
+@source inline('pt-0 pt-px pt-0.5 pt-1 pt-1.5 pt-2 pt-2.5 pt-3 pt-3.5 pt-4 pt-5 pt-6 pt-7 pt-8 pt-9 pt-10 pt-11 pt-12 pt-14 pt-16 pt-20 pt-24 pt-28 pt-32 pt-36 pt-40 pt-44 pt-48 pt-52 pt-56 pt-60 pt-64 pt-72 pt-80 pt-96');
+@source inline('pr-0 pr-px pr-0.5 pr-1 pr-1.5 pr-2 pr-2.5 pr-3 pr-3.5 pr-4 pr-5 pr-6 pr-7 pr-8 pr-9 pr-10 pr-11 pr-12 pr-14 pr-16 pr-20 pr-24 pr-28 pr-32 pr-36 pr-40 pr-44 pr-48 pr-52 pr-56 pr-60 pr-64 pr-72 pr-80 pr-96');
+@source inline('pb-0 pb-px pb-0.5 pb-1 pb-1.5 pb-2 pb-2.5 pb-3 pb-3.5 pb-4 pb-5 pb-6 pb-7 pb-8 pb-9 pb-10 pb-11 pb-12 pb-14 pb-16 pb-20 pb-24 pb-28 pb-32 pb-36 pb-40 pb-44 pb-48 pb-52 pb-56 pb-60 pb-64 pb-72 pb-80 pb-96');
+@source inline('pl-0 pl-px pl-0.5 pl-1 pl-1.5 pl-2 pl-2.5 pl-3 pl-3.5 pl-4 pl-5 pl-6 pl-7 pl-8 pl-9 pl-10 pl-11 pl-12 pl-14 pl-16 pl-20 pl-24 pl-28 pl-32 pl-36 pl-40 pl-44 pl-48 pl-52 pl-56 pl-60 pl-64 pl-72 pl-80 pl-96');
+
+/* NavBar */
+@source inline('navbar navbar-start navbar-center navbar-end');
+@source inline('card card-title card-body card-actions card-border card-dash card-side image-full card-xs card-sm card-md card-lg card-xl');
+
+@source inline('avatar avatar-xs avatar-sm avatar-md avatar-lg avatar-xl');
+@source inline('toast toast-start toast-center toast-end toast-top toast-bottom ');
+@source inline('tooltip tooltip-top tooltip-bottom tooltip-left tooltip-right');
+@source inline('alert alert-info alert-success alert-warning alert-error alert-outline alert-dash alert-soft alert-vertical alert-horizontal');
+
+@source inline('cursor-pointer cursor-not-allowed');
+@source inline('grid-cols-[auto_auto_auto]');
+
+/* DaisyUI Menu Safelist */
+@source inline("menu");
+@source inline("menu-title");
+@source inline("menu-dropdown");
+@source inline("menu-dropdown-toggle");
+@source inline("menu-disabled");
+@source inline("menu-active");
+@source inline("menu-focus");
+@source inline("menu-dropdown-show");
+
+@source inline("menu-xs");
+@source inline("menu-sm");
+@source inline("menu-md");
+@source inline("menu-lg");
+@source inline("menu-xl");
+
+@source inline("menu-vertical");
+@source inline("menu-horizontal");
+
+/* DaisyUI Select Safelist */
+@source inline("select select-ghost select-neutral select-primary select-secondary select-accent select-info select-success select-warning select-error select-xs select-sm select-md select-lg select-xl");
+
+@source inline('badge badge-{xs,sm,md,lg,xl}');
+@source inline('badge-{outline,dash,soft,ghost}');
+@source inline('badge-{neutral,primary,secondary,accent,info,success,warning,error}');
+
+@source inline('loading loading-spinner loading-sm loading-md loading-lg loading-xl');

package/styles/_variables.css

@@ -0,0 +1,4 @@
+:root{
+    --nxa-tab-animation-duration:650ms;
+    --spacing:4px
+}

package/styles/animations.css

@@ -0,0 +1,80 @@
+
+[nxaTab].tab-animate-default.nxa-tab-closing {
+    animation: tab-in-default var(--nxa-tab-animation-duration) reverse;
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.22);
+}
+
+[nxaTab].tab-animate-default.nxa-tab-opening {
+    animation: tab-in-default var(--nxa-tab-animation-duration);
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.22);
+}
+
+[nxaTab].tab-animate-simple.nxa-tab-closing {
+    animation: tab-in-simple var(--nxa-tab-animation-duration) reverse;
+    animation-timing-function: linear();
+}
+
+[nxaTab].tab-animate-simple.nxa-tab-opening {
+    animation: tab-in-simple var(--nxa-tab-animation-duration);
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.22);
+    animation-delay: 150ms;
+}
+
+[nxaTab].tab-animate-fancy.nxa-tab-closing {
+    animation: tab-in-fancy var(--nxa-tab-animation-duration) reverse;
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.22);
+}
+
+[nxaTab].tab-animate-fancy.nxa-tab-opening {
+    animation: tab-in-fancy var(--nxa-tab-animation-duration);
+    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.22);
+}
+
+@keyframes tab-in-fancy {
+    0% {
+        translate: 100% 0;
+        scale: 1;
+        z-index: 0;
+    }
+
+    50% {
+        scale: 0.90;
+        transform: skewX(10deg) skewY(10deg) rotateX(20deg); 
+    }
+
+    100% {
+        translate: 0 0;
+        scale: 1;
+        z-index: 10;
+    }
+}
+
+@keyframes tab-in-simple {
+    0% {
+        translate: -200% 0;
+        z-index: 0;
+    }
+
+    100% {
+        translate: 0 0;
+        z-index: 10;
+    }
+}
+
+@keyframes tab-in-default {
+    0% {
+        translate: 100% 0;
+        scale: 1;
+        z-index: 0;
+    }
+
+    50% {
+        scale: 0.90;
+    }
+
+    100% {
+        translate: 0 0;
+        scale: 1;
+        z-index: 10;
+    }
+}

package/styles/components/buttons.css

@@ -0,0 +1,15 @@
+.nxa-click-animation {
+    @apply 
+        cursor-pointer 
+        transition 
+        active:scale-95 
+        /* rounded-md  */
+        duration-100 
+        ease-in-out 
+        will-change-transform 
+        transform-gpu 
+        origin-center;
+}
+.nxa-click-animation:hover{
+    background-color: oklch(var(--color-base-200));
+}

package/styles/components/modals.css

@@ -0,0 +1,3 @@
+.cdk-overlay-backdrop {
+    @apply hover:cursor-pointer;
+}

package/styles/components/nxa-drawer.css

@@ -0,0 +1,55 @@
+.nxa-drawer-container {
+    @apply w-fit min-h-0 h-fit box-border flex-1 flex flex-col overflow-hidden relative;
+
+    .nxa-drawer-header {
+        @apply h-fit;
+    }
+
+    .nxa-drawer-menu {
+        @apply block h-full overflow-y-auto;
+    }
+
+    .nxa-drawer-menu-section {
+        @apply overflow-hidden;
+        .nxa-drawer-menu-section-title {
+            @apply  ps-2;
+        }
+
+        .nxa-drawer-menu-entry {
+            @apply grid items-center btn-neutral ps-2 h-10 w-full gap-2 text-base-content;
+            grid-template-columns: 3em 2fr 1fr;
+
+            .nxa-drawer-menu-icon {
+                @apply ps-2 w-7 h-6 pt-1 text-center;
+            }
+
+            .nxa-drawer-menu-label {
+                @apply w-full text-start font-normal;
+            }
+
+            .nxa-drawer-menu-badge {}
+        }
+        
+        .nxa-drawer-menu-entry.active {
+            @apply bg-base-300;
+        }
+
+        .nxa-drawer-menu-expansion {
+            @apply grid items-center h-6 w-full gap-2;
+            grid-template-columns: 3em 2fr 1fr;
+
+            .nxa-drawer-menu-icon {
+                @apply ps-2 w-7 h-6 pt-1 text-center;
+            }
+
+            .nxa-drawer-menu-label {
+                @apply w-full text-start;
+            }
+
+            .nxa-drawer-menu-badge {}
+        }
+    }
+    .nxa-drawer-footer {
+        @apply  min-h-0;
+    }
+}

package/styles/components/progress-api-call.css

@@ -0,0 +1,5 @@
+progress.progress {
+    @apply absolute top-0 left-0 h-[2px] w-full;
+    @apply bg-gradient-to-r from-primary to-secondary;
+
+}

package/styles/components/text.css

@@ -0,0 +1,195 @@
+/* nxa Text Style */
+.nxa-text {
+    /* nxa Text Colors */
+    &.nxa-text-primary {
+        @apply text-primary;
+    }
+
+    &.nxa-text-secondary {
+        @apply text-secondary;
+    }
+
+    &.nxa-text-success {
+        @apply text-success;
+    }
+
+    &.nxa-text-warning {
+        @apply text-warning;
+    }
+
+    &.nxa-text-error {
+        @apply text-error;
+    }
+
+    &.nxa-text-content {
+        @apply text-base-content;
+    }
+
+    &.nxa-text-info {
+        @apply text-info-content;
+    }
+
+    &.nxa-text-neutral {
+        @apply text-neutral;
+    }
+
+
+    /* nxa Text Title */
+    &.nxa-text-title {
+        @apply font-bold;
+
+        &.nxa-text-xl {
+            @apply text-8xl;
+        }
+
+        &.nxa-text-lg {
+            @apply text-6xl;
+        }
+
+        &.nxa-text-md {
+            @apply text-4xl;
+        }
+
+        &.nxa-text-sm {
+            @apply text-2xl;
+        }
+
+        &.nxa-text-xs {
+            @apply text-xl;
+        }
+
+    }
+
+    /* nxa Text Subtitle */
+    &.nxa-text-subtitle {
+        @apply font-semibold;
+
+        &.nxa-text-xl {
+            @apply text-6xl;
+        }
+
+        &.nxa-text-lg {
+            @apply text-4xl;
+        }
+
+        &.nxa-text-md {
+            @apply text-2xl;
+        }
+
+        &.nxa-text-sm {
+            @apply text-xl;
+        }
+
+        &.nxa-text-xs {
+            @apply text-lg;
+        }
+    }
+
+    /* nxa Text Paragraph */
+    &.nxa-text-paragraph {
+        @apply text-base;
+
+        &.nxa-text-xl {
+            @apply text-xl;
+        }
+
+        &.nxa-text-lg {
+            @apply text-lg;
+        }
+
+        &.nxa-text-md {
+            @apply text-base;
+        }
+
+        &.nxa-text-sm {
+            @apply text-sm;
+        }
+
+        &.nxa-text-xs {
+            @apply text-xs;
+        }
+    }
+
+    /* nxa Text Caption */
+    &.nxa-text-caption {
+        &.nxa-text-xl {
+            @apply text-base;
+        }
+
+        &.nxa-text-lg {
+            @apply text-base;
+        }
+
+        &.nxa-text-md {
+            @apply text-sm;
+        }
+
+        &.nxa-text-sm {
+            @apply text-xs;
+        }
+
+        &.nxa-text-xs {
+            @apply text-xs;
+        }
+    }
+
+    /* nxa Text Label */
+    &.nxa-text-label {
+        @apply font-bold;
+
+        &.nxa-text-xl {
+            @apply text-base;
+        }
+
+        &.nxa-text-lg {
+            @apply text-base;
+        }
+
+        &.nxa-text-md {
+            @apply text-sm;
+        }
+
+        &.nxa-text-sm {
+            @apply text-xs;
+        }
+
+        &.nxa-text-xs {
+            @apply text-xs;
+        }
+    }
+
+
+    /* nxa Text Weight */
+
+    &.nxa-text-extralight {
+        @apply font-extralight;
+    }
+
+    &.nxa-text-thin {
+        @apply font-thin;
+    }
+
+    &.nxa-text-light {
+        @apply font-light;
+    }
+
+    &.nxa-text-normal {
+        @apply font-normal;
+    }
+
+    &.nxa-text-medium {
+        @apply font-medium;
+    }
+
+    &.nxa-text-semibold {
+        @apply font-semibold;
+    }
+
+    &.nxa-text-bold {
+        @apply font-bold;
+    }
+
+    &.nxa-text-extrabold {
+        @apply font-extrabold;
+    }
+}

package/styles/inputs/nxa-radio.css

@@ -0,0 +1,3 @@
+.nxa-radio{
+    /* @apply bg-green-600; */
+}

package/styles/layouts/host.css

@@ -0,0 +1,3 @@
+html,body{
+    @apply h-screen w-screen overflow-hidden box-border grid grid-cols-1 grid-rows-1;
+}

package/styles/main.css

@@ -0,0 +1,18 @@
+@import 'tailwindcss';
+@plugin 'daisyui';
+@import './_safelist.css';
+@import './_variables.css';
+@import './_layers.css';
+
+@import './components/buttons.css';
+@import './components/modals.css';
+@import './components/text.css';
+@import './components/nxa-drawer.css';
+@import './components/progress-api-call.css';
+
+@import './inputs/nxa-radio.css';
+
+@import './layouts/nxa-page.css';
+@import './layouts/host.css';
+
+@import './animations.css';