@keepui/ui 0.1.0

package/public-api.d.ts

@@ -0,0 +1,15 @@
+export * from './lib/models/file-result.model';
+export * from './lib/ports/file.port';
+export * from './lib/tokens/file.token';
+export * from './lib/services/web-file.service';
+export * from './lib/components/button/button.types';
+export * from './lib/components/button/button.component';
+export * from './lib/components/card/card.component';
+export * from './lib/components/image-preview/image-preview.component';
+export * from './lib/providers/provide-keep-ui';
+export * from './lib/providers/keep-ui-i18n.provider';
+export * from './lib/i18n/translation-keys';
+export * from './lib/i18n/keep-ui-translations';
+export * from './lib/services/keep-ui-language.service';
+export * from './lib/testing/mock-file.service';
+//# sourceMappingURL=public-api.d.ts.map

package/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../projects/keep-ui/src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,gCAAgC,CAAC;AAG/C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,iCAAiC,CAAC;AAGhD,cAAc,sCAAsC,CAAC;AACrD,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wDAAwD,CAAC;AAGvE,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAGtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,iCAAiC,CAAC"}

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add KeepUI to an Angular project",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.d.ts

@@ -0,0 +1,12 @@
+import { Rule } from '@angular-devkit/schematics';
+interface NgAddOptions {
+    project?: string;
+}
+/**
+ * `ng add @keepui/ui` schematic.
+ *
+ * Installs the package and prints guidance on how to register
+ * `provideKeepUi()` in the host application's `app.config.ts`.
+ */
+export declare function ngAdd(_options: NgAddOptions): Rule;
+export {};

package/schematics/ng-add/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+/**
+ * `ng add @keepui/ui` schematic.
+ *
+ * Installs the package and prints guidance on how to register
+ * `provideKeepUi()` in the host application's `app.config.ts`.
+ */
+function ngAdd(_options) {
+    return (tree, context) => {
+        context.addTask(new tasks_1.NodePackageInstallTask());
+        context.logger.info('');
+        context.logger.info('✅ KeepUI has been added to your project!');
+        context.logger.info('');
+        context.logger.info('Next steps:');
+        context.logger.info('  1. Open your app.config.ts and add provideKeepUi() to the providers array:');
+        context.logger.info('');
+        context.logger.info("     import { provideKeepUi } from '@keepui/ui';");
+        context.logger.info('');
+        context.logger.info('     export const appConfig: ApplicationConfig = {');
+        context.logger.info('       providers: [provideKeepUi()],');
+        context.logger.info('     };');
+        context.logger.info('');
+        context.logger.info('  2. Use KeepUI components in your templates:');
+        context.logger.info("     import { ImagePreviewComponent } from '@keepui/ui';");
+        context.logger.info('');
+        context.logger.info('  3. For Capacitor projects, use provideKeepUiCapacitor() from @keepui/ui/capacitor instead.');
+        context.logger.info('');
+        return tree;
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;AAaA,sBA4BC;AAxCD,4DAA0E;AAM1E;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,QAAsB;IAC1C,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAE9C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;QAChE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnC,OAAO,CAAC,MAAM,CAAC,IAAI,CACjB,8EAA8E,CAC/E,CAAC;QACF,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;QACxE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;QAC1E,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;QAC5D,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;QACrE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;QAChF,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CACjB,8FAA8F,CAC/F,CAAC;QACF,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}

package/schematics/ng-add/index.ts

@@ -0,0 +1,42 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+interface NgAddOptions {
+  project?: string;
+}
+
+/**
+ * `ng add @keepui/ui` schematic.
+ *
+ * Installs the package and prints guidance on how to register
+ * `provideKeepUi()` in the host application's `app.config.ts`.
+ */
+export function ngAdd(_options: NgAddOptions): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+
+    context.logger.info('');
+    context.logger.info('✅ KeepUI has been added to your project!');
+    context.logger.info('');
+    context.logger.info('Next steps:');
+    context.logger.info(
+      '  1. Open your app.config.ts and add provideKeepUi() to the providers array:',
+    );
+    context.logger.info('');
+    context.logger.info("     import { provideKeepUi } from '@keepui/ui';");
+    context.logger.info('');
+    context.logger.info('     export const appConfig: ApplicationConfig = {');
+    context.logger.info('       providers: [provideKeepUi()],');
+    context.logger.info('     };');
+    context.logger.info('');
+    context.logger.info('  2. Use KeepUI components in your templates:');
+    context.logger.info("     import { ImagePreviewComponent } from '@keepui/ui';");
+    context.logger.info('');
+    context.logger.info(
+      '  3. For Capacitor projects, use provideKeepUiCapacitor() from @keepui/ui/capacitor instead.',
+    );
+    context.logger.info('');
+
+    return tree;
+  };
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "id": "KeepUINgAdd",
+  "title": "Add KeepUI to an Angular project",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add KeepUI to.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}

package/styles/_index.css

@@ -0,0 +1,73 @@
+/*
+ * KeepUI — Styles entry point
+ *
+ * Import this file once in your application's global stylesheet:
+ *
+ *   @import "@keepui/ui/styles";
+ *
+ * It includes:
+ *   - Default light & dark theme tokens (CSS custom properties)
+ *   - Tailwind CSS v4 theme mappings via @theme inline
+ *
+ * ─── Tailwind v4 utilities generated ────────────────────────────────────────
+ *
+ * Surface & background:
+ *   bg-keepui-background    bg-keepui-surface    bg-keepui-surface-hover
+ *
+ * Text:
+ *   text-keepui-text    text-keepui-text-muted    text-keepui-text-disabled
+ *
+ * Borders:
+ *   border-keepui-border    border-keepui-border-strong
+ *
+ * Brand / Primary:
+ *   bg-keepui-primary    bg-keepui-primary-hover    bg-keepui-primary-active
+ *   text-keepui-primary-fg    border-keepui-primary
+ *
+ * Feedback:
+ *   text-keepui-error    bg-keepui-error    bg-keepui-success    bg-keepui-warning
+ *
+ * Shadows:
+ *   shadow-keepui-sm    shadow-keepui-md    shadow-keepui-lg
+ *
+ * ─── Requirements ───────────────────────────────────────────────────────────
+ *
+ * Your application must process this file with Tailwind CSS v4 (e.g. via
+ * @tailwindcss/postcss or @tailwindcss/vite) to generate the utility classes.
+ * ────────────────────────────────────────────────────────────────────────────
+ */
+
+@import "./themes.css";
+
+@theme inline {
+  /* ── Surfaces ── */
+  --color-keepui-background:      var(--keepui-background);
+  --color-keepui-surface:         var(--keepui-surface);
+  --color-keepui-surface-hover:   var(--keepui-surface-hover);
+
+  /* ── Borders ── */
+  --color-keepui-border:          var(--keepui-border);
+  --color-keepui-border-strong:   var(--keepui-border-strong);
+
+  /* ── Text ── */
+  --color-keepui-text:            var(--keepui-text);
+  --color-keepui-text-muted:      var(--keepui-text-muted);
+  --color-keepui-text-disabled:   var(--keepui-text-disabled);
+
+  /* ── Primary ── */
+  --color-keepui-primary:         var(--keepui-primary);
+  --color-keepui-primary-hover:   var(--keepui-primary-hover);
+  --color-keepui-primary-active:  var(--keepui-primary-active);
+  --color-keepui-primary-fg:      var(--keepui-primary-foreground);
+
+  /* ── Feedback ── */
+  --color-keepui-error:           var(--keepui-error);
+  --color-keepui-error-fg:        var(--keepui-error-foreground);
+  --color-keepui-success:         var(--keepui-success);
+  --color-keepui-warning:         var(--keepui-warning);
+
+  /* ── Shadows ── */
+  --shadow-keepui-sm: var(--keepui-shadow-sm);
+  --shadow-keepui-md: var(--keepui-shadow-md);
+  --shadow-keepui-lg: var(--keepui-shadow-lg);
+}

package/styles/themes.css

@@ -0,0 +1,130 @@
+/*
+ * KeepUI — Default Theme
+ *
+ * This file defines all the CSS custom properties (design tokens) used by
+ * KeepUI components.  Import it once in your application's global stylesheet:
+ *
+ *   @import "@keepui/ui/styles/themes.css";
+ *
+ * ─── How to customise ───────────────────────────────────────────────────
+ *
+ * Override any variable in your own CSS to create a custom theme:
+ *
+ *   :root {
+ *     --keepui-primary:   #6366f1;
+ *     --keepui-primary-hover: #4f46e5;
+ *   }
+ *
+ *   [data-theme="dark"] {
+ *     --keepui-primary:   #818cf8;
+ *     --keepui-primary-hover: #a5b4fc;
+ *   }
+ *
+ * ─── Switching themes at runtime ────────────────────────────────────────
+ *
+ * Add `data-theme="dark"` to <html> or any ancestor element:
+ *
+ *   document.documentElement.setAttribute('data-theme', 'dark');
+ *
+ * Or rely on the user's OS preference — the defaults already include
+ * a `@media (prefers-color-scheme: dark)` block.
+ * ────────────────────────────────────────────────────────────────────────
+ */
+
+/* ===== LIGHT THEME (default) ===== */
+:root {
+  /* ── Brand ── */
+  --keepui-primary:            #3b82f6;
+  --keepui-primary-hover:      #2563eb;
+  --keepui-primary-active:     #1d4ed8;
+  --keepui-primary-foreground:  #ffffff;
+
+  /* ── Surfaces ── */
+  --keepui-background:         #f5f5f5;
+  --keepui-surface:            #ffffff;
+  --keepui-surface-hover:      #f0f0f0;
+
+  /* ── Borders ── */
+  --keepui-border:             #e0e0e0;
+  --keepui-border-strong:      #cccccc;
+
+  /* ── Text ── */
+  --keepui-text:               #1f2937;
+  --keepui-text-muted:         #6b7280;
+  --keepui-text-disabled:      #9ca3af;
+
+  /* ── Feedback ── */
+  --keepui-error:              #dc2626;
+  --keepui-error-foreground:   #ffffff;
+  --keepui-success:            #16a34a;
+  --keepui-warning:            #f59e0b;
+
+  /* ── Misc ── */
+  --keepui-radius:             0.5rem;
+  --keepui-radius-sm:          0.25rem;
+  --keepui-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.12);
+  --keepui-shadow-md:          0 3px 6px rgba(0, 0, 0, 0.15);
+  --keepui-shadow-lg:          0 6px 12px rgba(0, 0, 0, 0.18);
+  --keepui-transition:         0.2s ease;
+  --keepui-disabled-opacity:   0.5;
+  --keepui-font-family:        system-ui, -apple-system, sans-serif;
+}
+
+/* ===== DARK THEME ===== */
+[data-theme="dark"] {
+  --keepui-primary:            #60a5fa;
+  --keepui-primary-hover:      #93c5fd;
+  --keepui-primary-active:     #3b82f6;
+  --keepui-primary-foreground:  #0f172a;
+
+  --keepui-background:         #0f172a;
+  --keepui-surface:            #1e293b;
+  --keepui-surface-hover:      #334155;
+
+  --keepui-border:             #334155;
+  --keepui-border-strong:      #475569;
+
+  --keepui-text:               #f1f5f9;
+  --keepui-text-muted:         #94a3b8;
+  --keepui-text-disabled:      #64748b;
+
+  --keepui-error:              #f87171;
+  --keepui-error-foreground:   #0f172a;
+  --keepui-success:            #4ade80;
+  --keepui-warning:            #fbbf24;
+
+  --keepui-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
+  --keepui-shadow-md:          0 3px 6px rgba(0, 0, 0, 0.45);
+  --keepui-shadow-lg:          0 6px 12px rgba(0, 0, 0, 0.5);
+}
+
+/* ===== Auto dark (OS preference) ===== */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --keepui-primary:            #60a5fa;
+    --keepui-primary-hover:      #93c5fd;
+    --keepui-primary-active:     #3b82f6;
+    --keepui-primary-foreground:  #0f172a;
+
+    --keepui-background:         #0f172a;
+    --keepui-surface:            #1e293b;
+    --keepui-surface-hover:      #334155;
+
+    --keepui-border:             #334155;
+    --keepui-border-strong:      #475569;
+
+    --keepui-text:               #f1f5f9;
+    --keepui-text-muted:         #94a3b8;
+    --keepui-text-disabled:      #64748b;
+
+    --keepui-error:              #f87171;
+    --keepui-error-foreground:   #0f172a;
+    --keepui-success:            #4ade80;
+    --keepui-warning:            #fbbf24;
+
+    --keepui-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
+    --keepui-shadow-md:          0 3px 6px rgba(0, 0, 0, 0.45);
+    --keepui-shadow-lg:          0 6px 12px rgba(0, 0, 0, 0.5);
+  }
+}
+