@resolve-components/theme 1.0.0 → 1.2.1

package/paginator/rc-paginator.scss

@@ -0,0 +1,86 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  .rc-paginator {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: rc-theme('paginator-gap');
+    padding: rc-theme('paginator-padding');
+    font-family: rc-theme('paginator-font-family');
+    font-size: rc-theme('paginator-font-size');
+    background: rc-theme('paginator-background');
+    border-top: 1px solid rc-theme('paginator-border-color');
+  }
+
+  .rc-paginator-size {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: auto;
+  }
+
+  .rc-paginator-size-label {
+    color: rc-theme('paginator-size-label-color');
+    white-space: nowrap;
+  }
+
+  .rc-paginator-range {
+    color: rc-theme('paginator-range-color');
+    white-space: nowrap;
+  }
+
+  .rc-paginator-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+    margin-left: auto;
+  }
+
+  .rc-paginator-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: rc-theme('paginator-ellipsis-color');
+    pointer-events: none;
+    user-select: none;
+  }
+
+  // ── Mobile ────────────────────────────────────────────────────────────────
+  @media (max-width: 600px) {
+    .rc-paginator {
+      justify-content: center;
+      row-gap: 0.5rem;
+    }
+
+    // Size selector: own row, centered, no auto margin
+    .rc-paginator-size {
+      flex-basis: 100%;
+      justify-content: center;
+      margin-right: 0;
+    }
+
+    // Hide verbose "Rows per page:" label — just show the select
+    .rc-paginator-size-label {
+      display: none;
+    }
+
+    // Range: own centered row
+    .rc-paginator-range {
+      flex-basis: 100%;
+      text-align: center;
+    }
+
+    // Nav: centered, scrollable if too many page buttons
+    .rc-paginator-nav {
+      margin-left: 0;
+      overflow-x: auto;
+      max-width: 100%;
+      // thin scrollbar so it doesn't look terrible if scrolling is needed
+      scrollbar-width: thin;
+    }
+  }
+}

package/progress-bar/rc-progress-bar.scss

@@ -0,0 +1,88 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  // ── Track ─────────────────────────────────────────────────────────────────
+  .rc-progress-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+  }
+
+  .rc-progress-bar-label {
+    display: flex;
+    justify-content: space-between;
+    font-family: rc-theme('progress-bar-label-font-family');
+    font-size: rc-theme('progress-bar-label-font-size');
+    color: rc-theme('progress-bar-label-color');
+    line-height: 1;
+  }
+
+  .rc-progress-bar-track {
+    position: relative;
+    width: 100%;
+    height: rc-theme('progress-bar-height');
+    background: rc-theme('progress-bar-background');
+    border-radius: rc-theme('progress-bar-border-radius');
+    overflow: hidden;
+  }
+
+  // ── Fill ──────────────────────────────────────────────────────────────────
+  .rc-progress-bar-fill {
+    height: 100%;
+    border-radius: inherit;
+    background: currentColor;
+    @include rc-component-animation(
+      width,
+      $duration: rc-theme('progress-bar-transition-duration')
+    );
+  }
+
+  // ── Status colors ────────────────────────────────────────────────────────
+  .rc-progress-bar-primary {
+    color: rc-theme('progress-bar-primary-color');
+  }
+  .rc-progress-bar-info {
+    color: rc-theme('progress-bar-info-color');
+  }
+  .rc-progress-bar-success {
+    color: rc-theme('progress-bar-success-color');
+  }
+  .rc-progress-bar-warning {
+    color: rc-theme('progress-bar-warning-color');
+  }
+  .rc-progress-bar-danger {
+    color: rc-theme('progress-bar-danger-color');
+  }
+
+  // ── Striped ───────────────────────────────────────────────────────────────
+  .rc-progress-bar-striped .rc-progress-bar-fill {
+    background-image: linear-gradient(
+      -45deg,
+      rgba(255, 255, 255, 0.18) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.18) 50%,
+      rgba(255, 255, 255, 0.18) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1.5rem 1.5rem;
+    background-color: currentColor;
+  }
+
+  // ── Indeterminate ─────────────────────────────────────────────────────────
+  .rc-progress-bar-indeterminate .rc-progress-bar-fill {
+    width: 40% !important;
+    animation: rc-progress-indeterminate 1.4s ease-in-out infinite;
+  }
+
+  @keyframes rc-progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(350%);
+    }
+  }
+}

package/radio/rc-radio.scss

@@ -0,0 +1,124 @@
+// =============================================================================
+// rc-radio  Resolve Components Radio Button (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  .rc-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: rc-theme('radio-group-gap');
+
+    &-disabled {
+      opacity: rc-theme('radio-disabled-opacity');
+      pointer-events: none;
+    }
+  }
+
+  .rc-radio-button {
+    display: inline-flex;
+    align-items: center;
+    gap: rc-theme('radio-gap');
+    cursor: pointer;
+    user-select: none;
+    font-family: rc-theme('radio-font-family');
+    color: rc-theme('radio-text-color');
+
+    // ── Sizes ──────────────────────────────────────────────────────────────
+
+    &-sm {
+      font-size: rc-theme('radio-sm-font-size');
+
+      .rc-radio-button-control {
+        width: rc-theme('radio-sm-size');
+        height: rc-theme('radio-sm-size');
+      }
+
+      .rc-radio-button-dot {
+        width: rc-theme('radio-sm-dot-size');
+        height: rc-theme('radio-sm-dot-size');
+      }
+    }
+
+    &-md {
+      font-size: rc-theme('radio-md-font-size');
+
+      .rc-radio-button-control {
+        width: rc-theme('radio-md-size');
+        height: rc-theme('radio-md-size');
+      }
+
+      .rc-radio-button-dot {
+        width: rc-theme('radio-md-dot-size');
+        height: rc-theme('radio-md-dot-size');
+      }
+    }
+
+    // ── Disabled ─────────────────────────────────────────────────────────
+
+    &-disabled {
+      opacity: rc-theme('radio-disabled-opacity');
+      cursor: not-allowed;
+    }
+
+    // ── Checked ──────────────────────────────────────────────────────────
+
+    &-checked .rc-radio-button-control {
+      border-color: rc-theme('radio-checked-border-color');
+      background: rc-theme('radio-checked-background');
+    }
+
+    &-checked .rc-radio-button-dot {
+      background: rc-theme('radio-dot-color');
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    // ── Focus ring ────────────────────────────────────────────────────────
+
+    &:focus-visible .rc-radio-button-control {
+      outline: 2px solid rc-theme('radio-focus-outline-color');
+      outline-offset: 2px;
+    }
+
+    // ── Hover (not disabled, not checked) ─────────────────────────────────
+
+    &:not(.rc-radio-button-disabled):not(.rc-radio-button-checked):hover {
+      .rc-radio-button-control {
+        border-color: rc-theme('radio-hover-border-color');
+        background: rc-theme('radio-hover-background');
+      }
+    }
+
+    // ── Parts ─────────────────────────────────────────────────────────────
+
+    &-control {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      border: 2px solid rc-theme('radio-border-color');
+      background: rc-theme('radio-background');
+      @include rc-component-animation(
+        border-color background box-shadow,
+        $speed: 'medium'
+      );
+    }
+
+    &-dot {
+      border-radius: 50%;
+      background: rc-theme('radio-dot-color');
+      transform: scale(0);
+      opacity: 0;
+      @include rc-component-animation(transform opacity, $speed: 'medium');
+    }
+
+    &-label {
+      line-height: 1.5;
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -3,27 +3,101 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
-function getWorkspace(tree) {
-    const file = tree.exists('angular.json')
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const isNxWorkspace = (tree) => tree.exists('nx.json');
+/**
+ * Try to resolve project config from a root angular.json / workspace.json.
+ * Works for standard Angular workspaces AND Nx workspaces that still maintain
+ * a root angular.json shim.
+ */
+function getAngularWorkspaceProject(tree, projectName) {
+    const wsFile = tree.exists('angular.json')
         ? 'angular.json'
         : tree.exists('workspace.json')
             ? 'workspace.json'
             : null;
-    if (!file)
+    if (!wsFile)
         return null;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let ws;
     try {
-        const content = JSON.parse(tree.read(file).toString('utf-8'));
-        return { file, content };
+        ws = JSON.parse(tree.read(wsFile).toString('utf-8'));
     }
     catch {
         return null;
     }
+    const resolved = projectName ??
+        ws['defaultProject'] ??
+        Object.keys(ws['projects'] ?? {})[0] ??
+        null;
+    if (!resolved)
+        return null;
+    const project = ws['projects']?.[resolved];
+    if (!project)
+        return null;
+    const sourceRoot = project['sourceRoot'] ?? 'src';
+    return {
+        file: wsFile,
+        projectName: resolved,
+        content: ws,
+        sourceRoot,
+        isNxProjectJson: false,
+    };
 }
-function resolveProjectName(ws, options) {
-    if (options.project)
-        return options.project;
-    const c = ws.content;
-    return c['defaultProject'] ?? Object.keys(c['projects'] ?? {})[0] ?? null;
+/**
+ * In Nx v16+ workspaces there is no writable root angular.json.
+ * Discover project.json files under apps/ or projects/.
+ */
+function getNxProjectJsonConfig(tree, projectName) {
+    const candidates = [];
+    if (projectName) {
+        candidates.push(`apps/${projectName}/project.json`, `libs/${projectName}/project.json`, `${projectName}/project.json`);
+    }
+    // Auto-discover under apps/ and projects/
+    for (const root of ['apps', 'projects']) {
+        const dir = tree.getDir(root);
+        for (const sub of dir.subdirs) {
+            const p = `${root}/${sub}/project.json`;
+            if (!candidates.includes(p))
+                candidates.push(p);
+        }
+    }
+    for (const path of candidates) {
+        if (!tree.exists(path))
+            continue;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const content = JSON.parse(tree.read(path).toString('utf-8'));
+            // Skip non-application projects (libraries, e2e, etc.)
+            if (content['projectType'] && content['projectType'] !== 'application')
+                continue;
+            const projName = content['name'] ?? path.split('/')[1];
+            const defaultSourceRoot = path.split('/').slice(0, -1).join('/') + '/src';
+            const sourceRoot = content['sourceRoot'] ?? defaultSourceRoot;
+            return {
+                file: path,
+                projectName: projName,
+                content,
+                sourceRoot,
+                isNxProjectJson: true,
+            };
+        }
+        catch {
+            continue;
+        }
+    }
+    return null;
+}
+function resolveProjectConfig(tree, options) {
+    const nx = isNxWorkspace(tree);
+    // Prefer reading from project.json in Nx workspaces (it's always writable)
+    if (nx) {
+        return (getNxProjectJsonConfig(tree, options.project ?? null) ??
+            getAngularWorkspaceProject(tree, options.project ?? null));
+    }
+    return getAngularWorkspaceProject(tree, options.project ?? null);
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getBuildOptions(project) {
@@ -32,100 +106,103 @@ function getBuildOptions(project) {
         null);
 }
 // ---------------------------------------------------------------------------
-// Rule: patch angular.json
+// Rule: patch build config (angular.json or Nx project.json)
 // ---------------------------------------------------------------------------
-function addAngularJsonConfig(options) {
-    return (tree) => {
-        const ws = getWorkspace(tree);
-        if (!ws)
-            return tree;
-        const projectName = resolveProjectName(ws, options);
-        if (!projectName)
+function addBuildConfig(options) {
+    return (tree, ctx) => {
+        const cfg = resolveProjectConfig(tree, options);
+        if (!cfg) {
+            ctx.logger.warn('⚠  Could not locate a build config (angular.json / project.json).\n' +
+                '   Add the following manually to your project build options:\n' +
+                '   • styles: ["node_modules/@angular/cdk/overlay-prebuilt.css"]\n' +
+                '   • stylePreprocessorOptions.includePaths: ["node_modules/@resolve-components/theme/styles"]');
             return tree;
-        const project = ws.content['projects']?.[projectName];
-        if (!project)
-            return tree;
-        const buildOptions = getBuildOptions(project);
-        if (!buildOptions)
+        }
+        ctx.logger.info(`  Configuring project: ${cfg.projectName} (${cfg.file})`);
+        // In angular.json the project lives under projects[name]; in project.json it IS the root
+        const buildTarget = cfg.isNxProjectJson
+            ? cfg.content
+            : cfg.content['projects']?.[cfg.projectName];
+        const buildOptions = getBuildOptions(buildTarget);
+        if (!buildOptions) {
+            ctx.logger.warn('⚠  Could not find build target options — add them manually.');
             return tree;
-        // ── styles: prepend CDK overlay CSS ──
+        }
+        // ── styles: add CDK overlay CSS ──
         const cdkStyle = 'node_modules/@angular/cdk/overlay-prebuilt.css';
-        if (!Array.isArray(buildOptions['styles'])) {
+        if (!Array.isArray(buildOptions['styles']))
             buildOptions['styles'] = [];
-        }
         if (!buildOptions['styles'].includes(cdkStyle)) {
             buildOptions['styles'].unshift(cdkStyle);
         }
         // ── stylePreprocessorOptions: add includePath ──
         const includePath = 'node_modules/@resolve-components/theme/styles';
         buildOptions['stylePreprocessorOptions'] ??= {};
-        const paths = (buildOptions['stylePreprocessorOptions']['includePaths'] ??= []);
-        if (!paths.includes(includePath)) {
+        const paths = buildOptions['stylePreprocessorOptions']['includePaths'] ?? [];
+        buildOptions['stylePreprocessorOptions']['includePaths'] = paths;
+        if (!paths.includes(includePath))
             paths.unshift(includePath);
-        }
-        tree.overwrite(ws.file, JSON.stringify(ws.content, null, 2));
+        tree.overwrite(cfg.file, JSON.stringify(cfg.content, null, 2));
         return tree;
     };
 }
 // ---------------------------------------------------------------------------
 // Rule: add provideRcTheme() to app.config.ts
 // ---------------------------------------------------------------------------
-function addProviderToConfig() {
-    return (tree) => {
-        const configPath = 'src/app/app.config.ts';
-        if (!tree.exists(configPath))
+function addProviderToConfig(options) {
+    return (tree, ctx) => {
+        const cfg = resolveProjectConfig(tree, options);
+        const sourceRoot = cfg?.sourceRoot ?? 'src';
+        const configPath = `${sourceRoot}/app/app.config.ts`;
+        if (!tree.exists(configPath)) {
+            ctx.logger.warn(`⚠  ${configPath} not found — add provideRcTheme() manually.`);
             return tree;
+        }
         let content = tree.read(configPath).toString('utf-8');
         if (content.includes('provideRcTheme'))
             return tree;
-        // Insert import after the last existing @angular import
+        const themeName = options.theme ?? 'default';
+        // Append import after the last existing import line
         const importLine = `import { provideRcTheme } from '@resolve-components/theme';\n`;
-        const lastAngularImportMatch = [...content.matchAll(/^import .*;\n/gm)].pop();
-        if (lastAngularImportMatch) {
-            const insertAt = lastAngularImportMatch.index + lastAngularImportMatch[0].length;
-            content = content.slice(0, insertAt) + importLine + content.slice(insertAt);
+        const lastImportMatch = [...content.matchAll(/^import .*;\n/gm)].pop();
+        if (lastImportMatch) {
+            const insertAt = lastImportMatch.index + lastImportMatch[0].length;
+            content =
+                content.slice(0, insertAt) + importLine + content.slice(insertAt);
         }
         else {
             content = importLine + content;
         }
-        // Insert provider at start of providers array
-        content = content.replace(/(providers:\s*\[)/, `$1\n    provideRcTheme({ name: 'default' }),`);
+        // Prepend provider inside the providers array
+        content = content.replace(/(providers:\s*\[)/, `$1\n    provideRcTheme({ name: '${themeName}' }),`);
         tree.overwrite(configPath, content);
+        ctx.logger.info(`  Added provideRcTheme({ name: '${themeName}' }) → ${configPath}`);
         return tree;
     };
 }
 // ---------------------------------------------------------------------------
 // Rule: prepend @use / @include to styles.scss
 // ---------------------------------------------------------------------------
-function addGlobalStyles() {
-    return (tree) => {
-        const stylesPath = 'src/styles.scss';
-        if (!tree.exists(stylesPath))
+function addGlobalStyles(options) {
+    return (tree, ctx) => {
+        const cfg = resolveProjectConfig(tree, options);
+        const sourceRoot = cfg?.sourceRoot ?? 'src';
+        const stylesPath = `${sourceRoot}/styles.scss`;
+        if (!tree.exists(stylesPath)) {
+            ctx.logger.warn(`⚠  ${stylesPath} not found.\n` +
+                `   Add the following to your global stylesheet:\n` +
+                `   @use 'all' as *;\n   @include rc-install();`);
             return tree;
+        }
         let content = tree.read(stylesPath).toString('utf-8');
-        if (content.includes('@resolve-components/theme') || content.includes(`@use 'all'`)) {
+        if (content.includes('@resolve-components/theme') ||
+            content.includes(`@use 'all'`)) {
             return tree;
         }
-        const addition = [
-            `@use 'all';`,
-            `@use 'theming/install' as *;`,
-            ``,
-            `@include rc-install() {`,
-            `  *,`,
-            `  *::before,`,
-            `  *::after { box-sizing: border-box; }`,
-            ``,
-            `  body {`,
-            `    margin: 0;`,
-            `    font-family: rc-theme('font-family-primary');`,
-            `    font-size: rc-theme('text-body-font-size');`,
-            `    color: rc-theme('text-basic-color');`,
-            `    background-color: rc-theme('background-basic-color-1');`,
-            `  }`,
-            `}`,
-            ``,
-        ].join('\n');
+        // Minimal two-line setup — rc-install() emits all global resets and CSS vars
+        const addition = `@use 'all' as *;\n\n// Emit CSS custom property blocks\n@include rc-install();\n\n`;
         tree.overwrite(stylesPath, addition + content);
+        ctx.logger.info(`  Updated ${stylesPath} with @use 'all' as * and @include rc-install()`);
         return tree;
     };
 }
@@ -134,13 +211,16 @@ function addGlobalStyles() {
 // ---------------------------------------------------------------------------
 function ngAdd(options) {
     return (tree, context) => {
-        context.logger.info('Installing @resolve-components/theme…');
+        const nx = isNxWorkspace(tree);
+        context.logger.info(`\n🚀 Setting up @resolve-components/theme${nx ? ' (Nx monorepo detected)' : ''}…\n`);
         return (0, schematics_1.chain)([
-            addAngularJsonConfig(options),
-            addProviderToConfig(),
-            addGlobalStyles(),
+            addBuildConfig(options),
+            addProviderToConfig(options),
+            addGlobalStyles(options),
             (_tree, ctx) => {
                 ctx.addTask(new tasks_1.NodePackageInstallTask());
+                ctx.logger.info('\n✅ @resolve-components/theme setup complete!');
+                ctx.logger.info('   Restart your dev server to apply the new Sass includePaths.\n');
             },
         ])(tree, context);
     };

package/schematics/ng-add/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema",
-  "id": "SchematicsResolveComponentsNgAdd",
+  "$id": "SchematicsResolveComponentsNgAdd",
   "title": "Add @resolve-components/theme to an Angular project",
   "type": "object",
   "properties": {
@@ -10,6 +10,20 @@
       "$default": {
         "$source": "projectName"
       }
+    },
+    "theme": {
+      "type": "string",
+      "description": "The default visual theme to install.",
+      "default": "default",
+      "enum": ["default", "dark"],
+      "x-prompt": {
+        "message": "Which default theme would you like to use?",
+        "type": "list",
+        "items": [
+          { "value": "default", "label": "\u2600\uFE0F  Light  (default)" },
+          { "value": "dark", "label": "\uD83C\uDF19  Dark" }
+        ]
+      }
     }
   }
 }