@sapphire-caitlyn/schema-kit-ng 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapphire-caitlyn/schema-kit-ng",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.2.0",
@@ -33,7 +33,7 @@
   },
   "sideEffects": false,
   "exports": {
-    "./styles.css": "./styles/tailwind.css",
+    "./styles.scss": "./styles.scss",
     "./package.json": {
       "default": "./package.json"
     },

package/styles/directives/border-shimmer.css

@@ -0,0 +1,102 @@
+
+/*
+ * border-shimmer — Tailwind CSS v4 utility
+ *
+ * A light glint that travels around an element's border.
+ * Works with any border-radius and any background (including transparent),
+ * because the ring is drawn on a masked pseudo-element.
+ *
+ * Usage:
+ *   <div class="relative rounded-xl border-shimmer shimmer-sky-400">…</div>
+ *
+ * Requires a positioned element (relative / absolute / fixed / sticky).
+ *
+ * Modifiers (all optional):
+ *   shimmer-{color}            glint color        (default: currentColor)
+ *   shimmer-base-{color}       resting ring color (default: 15% currentColor)
+ *     ↳ both take an opacity modifier: shimmer-sky-400/60, shimmer-base-white/10
+ *   shimmer-opacity-{n}        whole-ring opacity (default: 100)
+ *   shimmer-width-{px}         ring thickness     (default: 1px)
+ *   shimmer-duration-{ms}      one full lap       (default: 3000ms)
+ *   shimmer-spread-{deg}       glint length       (default: 60deg)
+ * All accept arbitrary values too, e.g. shimmer-[#f0f]/[35%], shimmer-width-[0.15rem].
+ */
+
+@property --shimmer-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes border-shimmer {
+  to {
+    --shimmer-angle: 360deg;
+  }
+}
+
+@utility border-shimmer {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: var(--shimmer-z-index, 1);
+    border-radius: inherit;
+    padding: var(--shimmer-width, 1px);
+    pointer-events: none;
+    opacity: var(--shimmer-opacity, 100%);
+
+    background: conic-gradient(
+      from var(--shimmer-angle),
+      var(--shimmer-base, color-mix(in oklab, currentColor 15%, transparent)) 0deg,
+      var(--shimmer-color, currentColor) calc(var(--shimmer-spread, 60deg) * 0.5),
+      var(--shimmer-base, color-mix(in oklab, currentColor 15%, transparent)) var(--shimmer-spread, 60deg)
+    );
+
+    /* Keep only the ring: full box minus the content box. */
+    mask:
+      linear-gradient(#000 0 0) content-box exclude,
+      linear-gradient(#000 0 0);
+
+    animation: border-shimmer var(--shimmer-duration, 3000ms) linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+
+@utility shimmer-* {
+  --shimmer-color: --value(--color-*, [color]);
+  --shimmer-color: color-mix(in oklab, --value(--color-*, [color]) calc(--modifier(integer) * 1%), transparent);
+  --shimmer-color: color-mix(in oklab, --value(--color-*, [color]) --modifier([percentage]), transparent);
+}
+
+@utility shimmer-base-* {
+  --shimmer-base: --value(--color-*, [color]);
+  --shimmer-base: color-mix(in oklab, --value(--color-*, [color]) calc(--modifier(integer) * 1%), transparent);
+  --shimmer-base: color-mix(in oklab, --value(--color-*, [color]) --modifier([percentage]), transparent);
+}
+
+@utility shimmer-opacity-* {
+  --shimmer-opacity: calc(--value(integer) * 1%);
+  --shimmer-opacity: --value([percentage], [number]);
+}
+
+@utility shimmer-width-* {
+  --shimmer-width: calc(--value(integer) * 1px);
+  --shimmer-width: --value([length]);
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+  --shimmer-duration: --value([*]);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(--value(integer) * 1deg);
+  --shimmer-spread: --value([angle]);
+}
+@utility shimmer-z-index-* {
+  --shimmer-z-index: calc(--value(integer) * 1);
+  --shimmer-z-index: --value([*]);
+}

package/styles/directives/letter-reveal.css

@@ -0,0 +1,21 @@
+@utility letter-reveal {
+  display: inline-block;
+  animation: blur-reveal 500ms ease both;
+  animation-delay: calc((sibling-index() - 1) * 30ms);
+}
+
+@theme {
+  @keyframes blur-reveal {
+    from {
+      opacity: 0;
+      filter: blur(12px);
+      transform: translateY(1rem);
+    }
+
+    to {
+      opacity: 1;
+      filter: blur(0);
+      transform: translateY(0);
+    }
+  }
+}

package/styles.scss

@@ -0,0 +1,14 @@
+// Sem a extensão: o Sass embute o .css aqui. Com `.css`, vira `@import` de CSS puro, resolvido a
+// partir do `src/styles.scss` da app, e não acha o arquivo.
+@use './styles/directives/border-shimmer';
+@use './styles/directives/letter-reveal';
+
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+
+hlm-select-trigger > [brnselecttrigger],
+hlm-combobox-trigger > [brncomboboxtrigger] {
+  min-height: 2rem;
+}

package/types/sapphire-caitlyn-schema-kit-ng.d.ts

@@ -35,39 +35,41 @@ export declare enum FieldType {
   Icon = "Icon"
 }
 export declare const lstDateTypes: FieldType[];
+/**
+ * Provê o ambiente da aplicação (lido de `window[environmentKey]`) como signals,
+ * permitindo a configuração e recuperação de variáveis de ambiente.
+ */
 export declare class EnvironmentService<Environment> {
-  private environment;
+  private readonly _environment;
+  /**
+   * Ambiente da aplicação. Lança um erro ao ser lido se `window[environmentKey]` não estiver definido.
+   */
+  readonly environment: Signal<Environment>;
+  private readonly apiUrlGetter;
   /**
-   * Construtor do serviço EnvironmentService.
-   * Inicializa o ambiente a partir da variável global `window.environment`.
-   * Lança um erro se o ambiente não estiver definido.
+   * URL da API. Recalcula quando o ambiente ou o getter registrado mudam.
    */
+  readonly apiUrl: Signal<string>;
   constructor();
   /**
-   * @param env Define o ambiente da aplicação.
+   * Altera uma chave do ambiente. Gera um novo objeto para notificar quem depende do signal.
    */
   set<K extends keyof Environment>(key: K, value: Environment[K]): void;
   /**
-   * Retorna o ambiente da aplicação.
-   * Lança um erro se o ambiente não estiver definido.
-   * @returns O ambiente da aplicação.
+   * Retorna uma chave do ambiente. Dentro de `computed`/`effect`/template, vira dependência.
    */
   get<K extends keyof Environment>(key: K): Environment[K];
   /**
-   * Retorna a URL de um recurso.
+   * Retorna a URL de um recurso da API.
    * @param path O caminho do recurso.
-   * @returns A URL do recurso.
    */
   resource(path: string): string;
-  getEnvironment(): Environment;
   /**
-   * Retorna a URL da API.
-   * @returns A URL da API.
+   * Retorna o ambiente da aplicação. Equivale a ler o signal `environment`.
    */
-  apiUrl(): string;
-  private apiUrlGetter;
+  getEnvironment(): Environment;
   /**
-   * Registra uma função que retorna a URL da API.
+   * Registra a função que retorna a URL da API.
    * @param getter A função que retorna a URL da API.
    */
   registerApiUrlGetter(getter: () => string): void;
@@ -1047,6 +1049,7 @@ export interface SchemaKitModuleInputOptions<Environment = any> {
    * Factory that returns the perfil checker. Runs in an injection context, so `inject()` is allowed.
    */
   perfilCheckerFactory?: () => PerfilCheckerFn;
+  environmentKey: string;
 }
 export interface SchemaKitModuleOptions<Environment = any> extends Required<Omit<SchemaKitModuleInputOptions<Environment>, 'perfilCheckerFactory'>> {}
 export declare class SchemaTableActionsDirective<T = any> {