smartsell-ui-kit 0.1.10 → 0.1.12

package/dist/styles.css

@@ -7,6 +7,15 @@
   border-style: solid;
   box-shadow: none;
   font-family: var(--ui-kit-font-family);
+  /* Espelha o que o preflight aplica em `html`: sem isso o kit herda o
+       line-height do user-agent (~1.2) num app sem preflight e 1.5 num app com
+       preflight. */
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -64,6 +73,221 @@
   transform: translateY(-50%) scale(0.85);
 }
 
+/* ============================================================================
+   Reset "em caixa" (scoped preflight)
+   ----------------------------------------------------------------------------
+   O kit é buildado com `corePlugins.preflight: false` para não impor um reset
+   global no app consumidor. Sem preflight, porém, utilitários como `border-t`
+   (que só definem border-width) não pintam nada, form controls mantêm padding
+   do user-agent, `svg` fica inline, etc. — e o componente renderiza diferente
+   conforme o app consumidor tenha ou não preflight (Storybook não tem; o
+   smartsell-sales tem).
+
+   Este bloco espelha o preflight do Tailwind v3, escopado na raiz do kit, para
+   que o componente renderize igual nos dois cenários.
+
+   Especificidade ZERO de propósito (`:where()`): estas regras nunca vencem uma
+   classe do app consumidor nem de custom lib de tenant que estilize conteúdo
+   passado para dentro de um componente do kit. Elas só preenchem o que o
+   user-agent deixaria diferente. Os valores são idênticos aos do preflight do
+   Tailwind, então quando o app consumidor já tem preflight não há conflito:
+   quem vencer, aplica o mesmo valor.
+   ========================================================================== */
+
+:where(.ui-kit-root),
+:where(.ui-kit-root) :where(*),
+:where(.ui-kit-root) :where(*)::before,
+:where(.ui-kit-root) :where(*)::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+:where(.ui-kit-root) :where(*)::before,
+:where(.ui-kit-root) :where(*)::after {
+  --tw-content: '';
+}
+
+:where(.ui-kit-root) :where(hr) {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+:where(.ui-kit-root) :where(abbr:where([title])) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+:where(.ui-kit-root) :where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+:where(.ui-kit-root) :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+:where(.ui-kit-root) :where(b, strong) {
+  font-weight: bolder;
+}
+
+:where(.ui-kit-root) :where(code, kbd, samp, pre) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 1em;
+}
+
+:where(.ui-kit-root) :where(small) {
+  font-size: 80%;
+}
+
+:where(.ui-kit-root) :where(sub, sup) {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+:where(.ui-kit-root) :where(sub) {
+  bottom: -0.25em;
+}
+
+:where(.ui-kit-root) :where(sup) {
+  top: -0.5em;
+}
+
+:where(.ui-kit-root) :where(table) {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+:where(.ui-kit-root):where(button, input, optgroup, select, textarea),
+:where(.ui-kit-root) :where(button, input, optgroup, select, textarea) {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.ui-kit-root):where(button, select),
+:where(.ui-kit-root) :where(button, select) {
+  text-transform: none;
+}
+
+:where(.ui-kit-root):where(button),
+:where(.ui-kit-root) :where(button),
+:where(.ui-kit-root) :where(input:where([type='button'], [type='reset'], [type='submit'])) {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:where(.ui-kit-root) :where(progress) {
+  vertical-align: baseline;
+}
+
+:where(.ui-kit-root) :where(input)::-webkit-inner-spin-button,
+:where(.ui-kit-root) :where(input)::-webkit-outer-spin-button {
+  height: auto;
+}
+
+:where(.ui-kit-root) :where([type='search']) {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+:where(.ui-kit-root) :where(input)::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+:where(.ui-kit-root) :where(summary) {
+  display: list-item;
+}
+
+:where(.ui-kit-root)
+  :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
+  margin: 0;
+}
+
+:where(.ui-kit-root) :where(fieldset) {
+  margin: 0;
+  padding: 0;
+}
+
+:where(.ui-kit-root) :where(legend) {
+  padding: 0;
+}
+
+:where(.ui-kit-root) :where(ol, ul, menu) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(.ui-kit-root) :where(dialog) {
+  padding: 0;
+}
+
+/* `option` não está no preflight do Tailwind, mas o smartsell-sales zera o
+   padding de tudo (`* { padding: 0 }` no index.css). Sem isto o kit ficaria com
+   o padding do user-agent num app sem esse global. */
+
+:where(.ui-kit-root) :where(option) {
+  margin: 0;
+  padding: 0;
+}
+
+:where(.ui-kit-root) :where(textarea) {
+  resize: vertical;
+}
+
+:where(.ui-kit-root):where(input)::-moz-placeholder, :where(.ui-kit-root):where(textarea)::-moz-placeholder, :where(.ui-kit-root) :where(input)::-moz-placeholder, :where(.ui-kit-root) :where(textarea)::-moz-placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+:where(.ui-kit-root):where(input)::placeholder,
+:where(.ui-kit-root):where(textarea)::placeholder,
+:where(.ui-kit-root) :where(input)::placeholder,
+:where(.ui-kit-root) :where(textarea)::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+:where(.ui-kit-root):where(button, [role='button']),
+:where(.ui-kit-root) :where(button, [role='button']) {
+  cursor: pointer;
+}
+
+:where(.ui-kit-root):where(:disabled),
+:where(.ui-kit-root) :where(:disabled) {
+  cursor: default;
+}
+
+:where(.ui-kit-root) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+  vertical-align: middle;
+}
+
+:where(.ui-kit-root) :where(img, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+:where(.ui-kit-root) :where([hidden]) {
+  display: none;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -269,12 +493,8 @@
   width: 52px;
 }
 
-.w-\[84px\] {
-  width: 84px;
-}
-
-.w-\[calc\(50\%_-_0\.1875rem\)\] {
-  width: calc(50% - 0.1875rem);
+.w-\[72px\] {
+  width: 72px;
 }
 
 .w-auto {
@@ -597,10 +817,6 @@
   border-bottom-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-solid {
   border-style: solid;
 }
@@ -621,10 +837,6 @@
   border-color: var(--theme-primary);
 }
 
-.border-\[var\(--theme-secondary\)\] {
-  border-color: var(--theme-secondary);
-}
-
 .border-\[var\(--theme-textLight\)\] {
   border-color: var(--theme-textLight);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartsell-ui-kit",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Public UI primitives and modal helpers for SmartSell applications.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",