@ngneers/controls-themes 0.0.1-next.0

package/shade/spin-buttons/index.d.ts

@@ -0,0 +1,134 @@
+export declare const spinButtonsStyles: import("@ngneers/controls-themes").ThemePart<"spinButtons", import("@ngneers/controls-themes").ControlTemplate<"spinButtons", ["root", "leading", "trailing", "pair", `kind-${string}`], readonly [{
+    readonly class: "decrement";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}, {
+    readonly class: "increment";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"spinButtons">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/shade/spin-buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/spin-buttons/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0D5B,CAAC"}

package/shade/spin-buttons/index.js

@@ -0,0 +1,63 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { spinButtonsControlTemplate } from '@ngneers/controls-themes/templates/spin-buttons';
+export const spinButtonsStyles = createThemePart({
+    controlTemplate: spinButtonsControlTemplate,
+    base: baseStyles.spinButtons,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      /* Bleed over the field's vertical padding so the buttons reach the top
+       * and bottom border — the whole cell out to the edge stays clickable. */
+      ${c('root')} {
+        margin-block: calc(-1 * ${v('size.padding.sm')});
+      }
+      /* Bleed over the field's horizontal padding on the border-facing side. */
+      ${c('trailing')} {
+        margin-inline-end: calc(-1 * ${v('size.padding.md')});
+      }
+      ${c('leading')} {
+        margin-inline-start: calc(-1 * ${v('size.padding.md')});
+      }
+
+      /* Scoped under the root so these win over the icon-button's own
+       * two-class rules (e.g. .button-kind-icon sets a fixed width/height)
+       * regardless of stylesheet order. */
+      ${c('root')} ${d('decrement')},
+      ${c('root')} ${d('increment')} {
+        color: ${v('color.muted.foreground')};
+        /* Reset the underlying icon-button chrome (radius + fixed square size):
+         * these buttons bleed to the field border and fill its height. */
+        border-radius: 0;
+        width: auto;
+        height: auto;
+        /* Keep the icon visually inset by the field padding while the padded
+         * area itself is part of the clickable button. */
+        padding-block: 0;
+        padding-inline: ${v('size.padding.md')};
+        font-size: calc(1em * 0.9);
+        &:hover:not(:disabled) {
+          color: ${v('color.foreground')};
+          background: ${v('color.accent.base')};
+        }
+        &:disabled {
+          color: ${v('color.muted.foreground')};
+          opacity: 0.5;
+        }
+      }
+
+      /* The stacked pair: two half-height chevrons that share one field line. */
+      ${c('pair')}:not(${c('kind-inline')}) ${d('decrement')},
+      ${c('pair')}:not(${c('kind-inline')}) ${d('increment')} {
+        flex: 1 1 0;
+        font-size: calc(1em * 0.6);
+        padding-block: 0;
+      }
+
+      ${c('kind-inline')} {
+        gap: 2px;
+      }
+    `,
+    },
+});

package/shade/spinner/index.d.ts

@@ -0,0 +1,128 @@
+export declare const spinnerStyles: import("@ngneers/controls-themes").ThemePart<"spinner", import("@ngneers/controls-themes").ControlTemplate<"spinner", ["root", "circle", "svg", `color-${string}`, "centered"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"spinner">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/shade/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/spinner/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkDxB,CAAC"}

package/shade/spinner/index.js

@@ -0,0 +1,55 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { spinnerControlTemplate } from '@ngneers/controls-themes/templates/spinner';
+export const spinnerStyles = createThemePart({
+    controlTemplate: spinnerControlTemplate,
+    base: baseStyles.spinner,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ c }) => css `
+      ${c('root')} {
+        color: var(--color, currentColor);
+      }
+
+      ${c('svg')} {
+        animation: ${c('svg', 'animation')} 2000ms linear infinite;
+        transform-origin: 50% 50%;
+      }
+      ${c('circle')} {
+        --strokeWidth: var(--thickness, calc(var(--size) * 1px / 90 + 32px / 9));
+        --r: calc(var(--size) * 1px / 2 - var(--strokeWidth) / 2);
+        --1deg: calc(2 * pi * var(--r) / 360);
+        r: var(--r);
+        stroke-width: var(--strokeWidth);
+        animation: ${c('circle', 'animation')} 1400ms ease-in-out infinite;
+        transform-origin: 50% 50%;
+        stroke: currentColor;
+
+        stroke-linecap: round;
+      }
+      @keyframes ${c('circle', 'animation')} {
+        0% {
+          stroke-dasharray: calc(5 * var(--1deg)) calc(355 * var(--1deg));
+          transform: rotate(0);
+        }
+        50% {
+          stroke-dasharray: calc(270 * var(--1deg)) calc(90 * var(--1deg));
+          transform: rotate(90deg);
+        }
+        100% {
+          stroke-dasharray: calc(5 * var(--1deg)) calc(355 * var(--1deg));
+          transform: rotate(360deg);
+        }
+      }
+      @keyframes ${c('svg', 'animation')} {
+        0% {
+          transform: rotate(0);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    },
+});

package/shade/splitter/index.d.ts

@@ -0,0 +1,115 @@
+export declare const splitterStyles: import("@ngneers/controls-themes").ThemePart<"splitter", import("@ngneers/controls-themes").ControlTemplate<"splitter", ["root", "horizontal", "vertical", "panel", "divider", "divider-handle", "dragging", "divider-dragging", `kind-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"splitter">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/shade/splitter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/splitter/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4DzB,CAAC"}

package/shade/splitter/index.js

@@ -0,0 +1,65 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate } from '@ngneers/controls-themes/shade/base';
+import { splitterControlTemplate } from '@ngneers/controls-themes/templates/splitter';
+export const splitterStyles = createThemePart({
+    controlTemplate: splitterControlTemplate,
+    base: baseStyles.splitter,
+    dependencies: [colorsTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('panel')} {
+        overflow: hidden;
+      }
+
+      /* Default kind: the handle itself is the visible divider. */
+      ${c('kind-default')} {
+        ${c('divider-handle')} {
+          background: ${v('color.border')};
+          transition: background-color 0.15s ease;
+          &:hover {
+            background: ${v('color.accent.base')};
+          }
+          &:focus {
+            background: color-mix(in srgb, ${v('color.ring')} 40%, transparent);
+          }
+          &:active {
+            background: ${v('color.ring')};
+          }
+        }
+
+        &${c('horizontal')} {
+          ${c('divider')}, ${c('divider-handle')} {
+            width: 0.25rem;
+          }
+        }
+
+        &${c('vertical')} {
+          ${c('divider')}, ${c('divider-handle')} {
+            height: 0.25rem;
+          }
+        }
+      }
+
+      /* Thin & invisible kinds: the expanding ::after bar is the visible divider. */
+      ${c('kind-thin')}, ${c('kind-invisible')} {
+        ${c('divider-handle')}::after {
+          background: ${v('color.border')};
+          transition:
+            width 0.15s ease,
+            height 0.15s ease,
+            background-color 0.15s ease;
+        }
+        ${c('divider-handle')}:hover::after {
+          background: ${v('color.accent.base')};
+        }
+        ${c('divider-handle')}:focus::after {
+          background: color-mix(in srgb, ${v('color.ring')} 40%, transparent);
+        }
+        ${c('divider-handle')}:active::after {
+          background: ${v('color.ring')};
+        }
+      }
+    `,
+    },
+});