nath-angular-ui 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# NathAngularUi
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build nath-angular-ui
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/nath-angular-ui
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "nath-angular-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/aria": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@lucide/angular": "^1.23.0",
+    "ngx-mask": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "styles"
+  ],
+  "exports": {
+    "./styles/styles.css": {
+      "style": "./styles/styles.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/nath-angular-ui.d.ts",
+      "default": "./fesm2022/nath-angular-ui.mjs"
+    }
+  },
+  "module": "fesm2022/nath-angular-ui.mjs",
+  "typings": "types/nath-angular-ui.d.ts",
+  "type": "module"
+}

package/styles/styles.css

@@ -0,0 +1,285 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1600px;
+  --color-primary-50: #f9fafb;
+  --color-primary-100: #e4e7e9;
+  --color-primary-200: #ced4d8;
+  --color-primary-300: #b9c1c7;
+  --color-primary-400: #a3aeb6;
+  --color-primary-500: #8e9ba5;
+  --color-primary-600: #79848c;
+  --color-primary-700: #636d73;
+  --color-primary-800: #4e555b;
+  --color-primary-900: #393e42;
+  --color-primary-950: #242729;
+  --color-danger-50: oklch(97.1% 0.013 17.38);
+  --color-danger-100: oklch(93.6% 0.032 17.717);
+  --color-danger-200: oklch(88.5% 0.062 18.334);
+  --color-danger-300: oklch(80.8% 0.114 19.571);
+  --color-danger-400: oklch(70.4% 0.191 22.216);
+  --color-danger-500: oklch(63.7% 0.237 25.331);
+  --color-danger-600: oklch(57.7% 0.245 27.325);
+  --color-danger-700: oklch(50.5% 0.213 27.518);
+  --color-danger-800: oklch(44.4% 0.177 26.899);
+  --color-danger-900: oklch(39.6% 0.141 25.723);
+  --color-danger-950: oklch(25.8% 0.092 26.042);
+  --color-warning-50: oklch(98% 0.016 73.684);
+  --color-warning-100: oklch(95.4% 0.038 75.164);
+  --color-warning-200: oklch(90.1% 0.076 70.697);
+  --color-warning-300: oklch(83.7% 0.128 66.29);
+  --color-warning-400: oklch(75% 0.183 55.934);
+  --color-warning-500: oklch(70.5% 0.213 47.604);
+  --color-warning-600: oklch(64.6% 0.222 41.116);
+  --color-warning-700: oklch(55.3% 0.195 38.402);
+  --color-warning-800: oklch(47% 0.157 37.304);
+  --color-warning-900: oklch(40.8% 0.123 38.172);
+  --color-warning-950: oklch(26.6% 0.079 36.259);
+  --color-success-50: oklch(98.2% 0.018 155.826);
+  --color-success-100: oklch(96.2% 0.044 156.743);
+  --color-success-200: oklch(92.5% 0.084 155.995);
+  --color-success-300: oklch(87.1% 0.15 154.449);
+  --color-success-400: oklch(79.2% 0.209 151.711);
+  --color-success-500: oklch(72.3% 0.219 149.579);
+  --color-success-600: oklch(62.7% 0.194 149.214);
+  --color-success-700: oklch(52.7% 0.154 150.069);
+  --color-success-800: oklch(44.8% 0.119 151.328);
+  --color-success-900: oklch(39.3% 0.095 152.535);
+  --color-success-950: oklch(26.6% 0.065 152.934);
+  --color-info-50: oklch(98.4% 0.019 200.873);
+  --color-info-100: oklch(95.6% 0.045 203.388);
+  --color-info-200: oklch(91.7% 0.08 205.041);
+  --color-info-300: oklch(86.5% 0.127 207.078);
+  --color-info-400: oklch(78.9% 0.154 211.53);
+  --color-info-500: oklch(71.5% 0.143 215.221);
+  --color-info-600: oklch(60.9% 0.126 221.723);
+  --color-info-700: oklch(52% 0.105 223.128);
+  --color-info-800: oklch(45% 0.085 224.283);
+  --color-info-900: oklch(39.8% 0.07 227.392);
+  --color-info-950: oklch(30.2% 0.056 229.695);
+  --color-help-50: oklch(96.9% 0.016 293.756);
+  --color-help-100: oklch(94.3% 0.029 294.588);
+  --color-help-200: oklch(89.4% 0.057 293.283);
+  --color-help-300: oklch(81.1% 0.111 293.571);
+  --color-help-400: oklch(70.2% 0.183 293.541);
+  --color-help-500: oklch(60.6% 0.25 292.717);
+  --color-help-600: oklch(54.1% 0.281 293.009);
+  --color-help-700: oklch(49.1% 0.27 292.581);
+  --color-help-800: oklch(43.2% 0.232 292.759);
+  --color-help-900: oklch(38% 0.189 293.745);
+  --color-help-950: oklch(28.3% 0.141 291.089);
+  --color-surface-50: oklch(98.5% 0 0);
+  --color-surface-100: oklch(96.7% 0.001 286.375);
+  --color-surface-200: oklch(92% 0.004 286.32);
+  --color-surface-300: oklch(87.1% 0.006 286.286);
+  --color-surface-400: oklch(70.5% 0.015 286.067);
+  --color-surface-500: oklch(55.2% 0.016 285.938);
+  --color-surface-600: oklch(44.2% 0.017 285.786);
+  --color-surface-700: oklch(37% 0.013 285.805);
+  --color-surface-800: oklch(27.4% 0.006 286.033);
+  --color-surface-900: oklch(21% 0.006 285.885);
+  --color-surface-950: oklch(14.1% 0.005 285.823);
+}
+
+:root {
+  --color-zinc-950: theme('color.zinc.950');
+}
+
+/* Force Tailwind v4 to evaluate hover targets using simple matching, bypassing media checks
+   to avoid "hover:" being ignored in certain browsers (like Chromium on Linux) */
+@custom-variant hover (&:hover);
+
+@layer base {
+  .inputgroup {
+    display: flex;
+  }
+  .inputgroup > *:last-child:not(:first-child),
+  .inputgroup > *:last-child:not(:first-child) > *,
+  .inputgroup > *:only-child > *:last-child:not(:first-child),
+  .inputgroup > * > *:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .inputgroup > *:first-child:not(:last-child),
+  .inputgroup > *:first-child:not(:last-child) > *,
+  .inputgroup > *:only-child > *:first-child:not(:last-child),
+  .inputgroup > * > *:first-child:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .inputgroup > *:not(:first-child):not(:last-child),
+  .inputgroup > *:not(:first-child):not(:last-child) > *,
+  .inputgroup > *:only-child > *:not(:first-child):not(:last-child),
+  .inputgroup > * > *:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  .addon {
+    @apply inline-flex items-center justify-center px-3 py-2 bg-zinc-200 text-zinc-500 rounded-md shadow-sm;
+    .dark & {
+      @apply bg-slate-800 text-slate-300;
+    }
+  }
+
+  button:not(.icon-button):not(.button-unstyled),
+  .button:not(.icon-button):not(.button-unstyled) {
+    @apply cursor-pointer
+    rounded-md box-border border border-transparent
+    focus:outline-none
+    inline-flex gap-2 items-center justify-center leading-5
+    px-2 py-2.5
+    hover:no-underline
+    transition duration-200
+    disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  button:disabled,
+  .button:disabled {
+    @apply opacity-50 cursor-not-allowed;
+
+    .dark & {
+      @apply opacity-30!;
+    }
+  }
+
+  input:not([type='checkbox']),
+  .input,
+  select,
+  textarea {
+    @apply input-style;
+  }
+
+  input {
+    @apply px-3 py-2;
+  }
+
+  select {
+    @apply pl-2! pr-8! py-2 has-[option.placeholder:checked]:text-zinc-400;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22lucide%20lucide-chevron-down-icon%20lucide-chevron-down%22%3E%3Cpath%20d=%22m6%209%206%206%206-6%22/%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: calc(100% - 4px);
+  }
+
+  table {
+    @apply w-full;
+  }
+  table thead {
+    @apply sticky top-0 z-2 border-b-4 border-b-zinc-300 dark:border-b-zinc-700 bg-body;
+  }
+  table tfoot {
+    @apply sticky bottom-0;
+  }
+  table tbody {
+    @apply divide-y divide-zinc-300 dark:divide-zinc-700;
+  }
+  table caption {
+    @apply text-left italic text-neutral-500;
+  }
+  table th,
+  table td {
+    @apply px-2 py-2 text-left align-top;
+  }
+}
+
+@utility bg-body {
+  @apply bg-slate-200 dark:bg-zinc-950;
+}
+@utility text-body {
+  @apply dark:text-zinc-200 text-slate-950;
+}
+
+@utility inner-input {
+  @apply py-1.5! text-sm! outline-none! border-0! focus-within:ring-0! focus-within:border-0! shadow-none!;
+}
+
+@utility items-unset {
+  align-items: unset;
+}
+
+@utility toolbar {
+  @apply flex items-center justify-between flex-wrap py-3 px-4 bg-white rounded-md shadow-sm;
+  .dark & {
+    @apply bg-zinc-900;
+  }
+}
+
+.button-small {
+  @apply leading-2.5! py-1.5!;
+}
+
+.button-primary {
+  @apply shadow-sm
+    text-white bg-primary-500 not-disabled:hover:bg-primary-600;
+  .dark & {
+    @apply text-zinc-900 bg-primary-400 not-disabled:hover:bg-primary-300;
+  }
+}
+.button-text-primary {
+  @apply text-(--color-primary-700) not-disabled:hover:text-primary-800;
+}
+
+.button-secondary {
+  @apply shadow-sm text-slate-800 bg-slate-300 not-disabled:hover:bg-slate-300;
+  .dark & {
+    @apply text-slate-200 bg-slate-800 not-disabled:hover:bg-slate-700;
+  }
+}
+.button-text-secondary {
+  @apply text-slate-800 not-disabled:hover:text-slate-900;
+  .dark & {
+    @apply text-slate-200 not-disabled:hover:text-slate-100;
+  }
+}
+.button-success {
+  @apply shadow-sm text-white bg-(--color-success-500) not-disabled:hover:bg-(--color-success-600);
+}
+.button-text-success {
+  @apply text-(--color-success-500) not-disabled:hover:text-(--color-success-600);
+}
+.button-danger {
+  @apply shadow-sm text-white bg-(--color-danger-500) not-disabled:hover:bg-(--color-danger-600);
+}
+.button-text-danger {
+  @apply text-(--color-danger-500) not-disabled:hover:text-(--color-danger-600);
+}
+.button-warning {
+  @apply shadow-sm text-white bg-(--color-warning-500) not-disabled:hover:bg-(--color-warning-600);
+}
+.button-text-warning {
+  @apply text-(--color-warning-500) not-disabled:hover:text-(--color-warning-600);
+}
+.button-info {
+  @apply shadow-sm text-white bg-(--color-info-500) not-disabled:hover:bg-(--color-info-600);
+}
+.button-text-info {
+  @apply text-(--color-info-500) not-disabled:hover:text-(--color-info-600);
+}
+.button-help {
+  @apply shadow-sm text-white bg-(--color-help-500) not-disabled:hover:bg-(--color-help-600);
+}
+.button-text-help {
+  @apply text-(--color-help-500) not-disabled:hover:text-(--color-help-600);
+}
+
+@utility input-style {
+  /* 1. Base / Light Theme Styles */
+  @apply w-full flex flex-wrap items-center gap-1.5
+    border border-zinc-300 rounded-md shadow-sm
+    bg-white text-zinc-900 placeholder-zinc-400
+    focus-within:ring-1 focus-within:ring-black;
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+
+  /* 2. Dark Theme Styles nested using the v4 @variant directive */
+  .dark & {
+    @apply border-zinc-600 bg-zinc-950 text-zinc-100 focus-within:ring-white;
+  }
+}