@sapphire-caitlyn/schema-kit-ng 0.0.2 → 0.0.4

package/README.md

@@ -5,13 +5,35 @@ Lib de CRUD do backoffice: um `SchemaService` descreve a entidade, o `<schema-ta
 
 ## Entry points
 
-| Import                                 | Conteúdo                                                      |
-| -------------------------------------- | ------------------------------------------------------------- |
-| `@sapphire-caitlyn/schema-kit-ng`      | A lib (`src/public-api.ts`)                                   |
-| `@sapphire-caitlyn/schema-kit-ng/helm` | Componentes Spartan (helm) embutidos na lib (`helm/index.ts`) |
+| Import                                        | Conteúdo                                                      |
+| --------------------------------------------- | ------------------------------------------------------------- |
+| `@sapphire-caitlyn/schema-kit-ng`             | A lib (`src/public-api.ts`)                                   |
+| `@sapphire-caitlyn/schema-kit-ng/helm`        | Componentes Spartan (helm) embutidos na lib (`helm/index.ts`) |
+| `@sapphire-caitlyn/schema-kit-ng/styles.scss` | Estilos globais da lib (`src/lib/styles.scss`), ver "Estilos" |
 
 No `front-backoffice` a app não usa o pacote: importa o código-fonte pelos aliases do `tsconfig.json`
-(`@schema-kit` e `@sapphire-caitlyn/schema-kit-ng/helm`), o que mantém o hot reload.
+(`@schema-kit` e `@sapphire-caitlyn/schema-kit-ng/helm`), o que mantém o hot reload. Os estilos entram pelo
+caminho do fonte no `src/styles.scss` (`@use '../projects/schema-kit/src/lib/styles'`).
+
+## Estilos
+
+O `src/lib/styles.scss` não é compilado no build da lib: o `ng-package.json` copia o `.scss` e o
+`styles/directives/*.css` como estão para a raiz do pacote. Quem instala compila com o próprio Sass e Tailwind 4:
+
+```scss
+// styles.scss da app
+@use '@sapphire-caitlyn/schema-kit-ng/styles.scss';
+
+// O Tailwind não varre o node_modules: sem isso, as classes dos templates da lib não são geradas
+@source '../node_modules/@sapphire-caitlyn/schema-kit-ng';
+```
+
+O arquivo traz o Tailwind (theme, preflight, utilities), as utilities `border-shimmer`/`letter-reveal` e ajustes
+do select/combobox. As variáveis de tema (`--primary`, `--radius`...) e o preset do Spartan
+(`@spartan-ng/brain/hlm-tailwind-preset.css`) ficam com a app.
+
+Use o caminho com `.scss`: o `exports` do pacote só libera esse nome, então `.../styles` sem extensão não resolve.
+Arquivo novo em `src/lib/styles/` sai no pacote só se for `.css` (ou se entrar nos `assets` do `ng-package.json`).
 
 > **Não edite o `dist/schema-kit/package.json`.** A lib importa o helm por `<name>/helm`, e esse texto
 > vai literal para o bundle. Renomear só no `dist` publica um pacote que importa o nome antigo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapphire-caitlyn/schema-kit-ng",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.2.0",
@@ -20,6 +20,7 @@
     "embla-carousel-angular": "^22.0.0",
     "libphonenumber-js": "^1.13.14",
     "luxon": "^3.7.2",
+    "ngx-scrollbar": "^19.1.5",
     "rxjs": "^7.8.0",
     "tailwindcss": "^4.1.12"
   },
@@ -32,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;
+}