@loja-integrada/admin-components 0.21.0 → 0.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.21.0",
+  "version": "0.21.2",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {

package/src/Components/Button/Button.tsx

@@ -48,10 +48,16 @@ const listOfStylesDisabled = {
   onlyText: `bg-transparent text-on-base-3 shadow-none ring-0 border-0 `,
 }
 
+const listOfSizePaddings = {
+  small: `komea:px-3`,
+  default: ``,
+  large: `komea:px-6`,
+}
+
 const listOfSizes = {
-  small: `text-f6 komea:h-8 komea:px-3 h-10`,
+  small: `text-f6 komea:h-8 h-10`,
   default: `text-f6 komea:h-9 h-12`,
-  large: `text-f5 komea:h-10 komea:px-6 h-14`,
+  large: `text-f5 komea:h-10 h-14`,
 }
 
 const ButtonType = React.forwardRef(
@@ -97,7 +103,13 @@ const ButtonComponent = (
     ;(!disabled || !loading) && onClick && onClick(event)
   }
 
-  let classes = `inline-flex font-medium items-center justify-center px-5 komea:px-4 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
+  // `onlyText` é o único que não tem caixa, e o padding horizontal fica fora dele. Não dá para
+  // apenas parear com `komea:px-0`: as duas classes empatam em especificidade e o Tailwind emite
+  // `px-0` antes de `px-3`/`px-4`/`px-6`, então o zero perderia pela ordem.
+  const horizontalPadding =
+    variant === 'onlyText' ? '' : `px-5 komea:px-4 ${listOfSizePaddings[size]}`
+
+  let classes = `inline-flex font-semibold komea:font-medium items-center justify-center ${horizontalPadding} text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
 
   if (loading) {
     classes +=

package/src/Components/Table/Table.tsx

@@ -211,7 +211,7 @@ const TableComponent = ({
             <tr>
               <td colSpan={columnsLength || 1} className={`${TdClasses}`}>
                 <TdWrapper>
-                  <div className="text-center py-16 text-xl font-medium text-on-base-2">
+                  <div className="text-center py-16 text-xl font-semibold komea:font-medium text-on-base-2">
                     {emptyText}
                   </div>
                 </TdWrapper>

package/src/Components/TableList/TableList.tsx

@@ -60,7 +60,7 @@ const TableListComponent = ({
               {empty.illustration}
             </div>
           )}
-          <div className="table-list-empty-title text-center text-f4 font-medium text-primary-bold">
+          <div className="table-list-empty-title text-center text-f4 font-semibold komea:font-medium text-primary-bold">
             {empty.title}
           </div>
           {empty.subTitle && (

package/src/Forms/Checkbox/Checkbox.tsx

@@ -54,7 +54,7 @@ const CheckboxComponent = (
       disabled
         ? 'bg-base-4'
         : isChecked || isIndeterminate
-        ? 'bg-primary border-primary'
+        ? 'bg-primary border-primary komea:border-primary'
         : 'bg-base-1'
     }
     ${isCenterBoxAlign ? 'items-center' : ''}

package/src/Forms/Input/Input.tsx

@@ -9,7 +9,9 @@ import {
   defaultBorderClasses,
   inputContainerClasses,
   variantClasses,
+  prefixBorderlessKomeaClasses,
   prefixClasses,
+  sufixBorderlessKomeaClasses,
   sufixClasses,
   focusClass,
 } from '../commonStyles'
@@ -42,11 +44,11 @@ const InputComponent = (
 
   const prefixClass = `${prefixClasses} ${variantClasses[variant]} ${
     hasErrorState ? errorBorderClasses : ''
-  }`
+  } ${prefixBorder ? '' : prefixBorderlessKomeaClasses}`
 
   const sufixClass = `${sufixClasses} ${variantClasses[variant]} ${
     hasErrorState ? errorBorderClasses : ''
-  }`
+  } ${sufixBorder ? '' : sufixBorderlessKomeaClasses}`
 
   let inputContainerClass = `${inputContainerClasses} ${variantClasses[variant]}`
   if (disabled) {
@@ -63,8 +65,8 @@ const InputComponent = (
     hasErrorState ? errorBorderClasses : defaultBorderClasses
   } ${prefix && prefixBorder ? 'border-l' : ''}  ${
     sufix && sufixBorder ? 'border-r' : ''
-  } ${prefix && !prefixBorder ? 'pl-0' : ''} ${
-    sufix && !sufixBorder ? 'pr-0' : ''
+  } ${prefix && !prefixBorder ? 'pl-0 komea:pl-2' : ''} ${
+    sufix && !sufixBorder ? 'pr-0 komea:pr-2' : ''
   }`
 
   const LabelComponent = (

package/src/Forms/InputLabel/InputLabel.tsx

@@ -12,7 +12,7 @@ export const InputLabel = React.memo(
     if (!label) return null
     return (
       <label
-        className={`input-label text-f6 font-medium inline-flex items-center mb-0.5 ${
+        className={`input-label text-f6 font-semibold komea:font-medium inline-flex items-center mb-0.5 ${
           hasError ? 'text-danger' : 'text-on-base'
         } ${className}`}
         htmlFor={htmlFor}

package/src/Forms/commonStyles.ts

@@ -1,23 +1,44 @@
 export const inputPlaceholderClasses = 'placeholder-on-base-2'
 
 export const inputContainerDisabledClasses =
-  '!bg-base-3 !pointer-events-none !text-on-base-2'
+  '!bg-base-3 !pointer-events-none !text-on-base-2 komea:!bg-base-1 komea:!text-on-base komea:opacity-50'
 
 export const inputContainerReadonlyClasses = '!bg-base-2'
 
 export const errorBorderClasses =
-  'border-danger focus:border-danger komea:focus:ring-danger/20'
+  'border-danger focus:border-danger komea:focus-within:border-danger komea:focus-within:ring-danger/20'
 
-export const defaultBorderClasses = 'border-card-stroke komea:border-input-stroke'
+export const defaultBorderClasses =
+  'border-card-stroke komea:border-input-stroke komea:focus-within:border-focus komea:focus-within:ring-focus/50'
 
 export const focusClass = 'focus:border-inverted-1'
 
-export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 komea:border-input-stroke komea:px-3 komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus:border-focus komea:focus:ring-[3px] komea:focus:ring-focus/50 ${focusClass} ${inputPlaceholderClasses}`
+export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 komea:px-3 komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:ring-[3px] ${focusClass} ${inputPlaceholderClasses}`
 
-export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden komea:border-input-stroke komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:border-focus komea:focus-within:ring-[3px] komea:focus-within:ring-focus/50 ${inputPlaceholderClasses}`
+export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:ring-[3px] ${inputPlaceholderClasses}`
 
 const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 -mt-px`
 
+// Sem borda o adorno não é uma caixa, é o addon do komea-ds: 12px de recuo, ícone de 16px e 8px até
+// o valor.
+//
+// O ícone é normalizado porque o default do nosso `Icon` é 5 (20px) e o DS usa 16 nos campos — é o
+// que torna a geometria determinística em vez de depender do `size` que a app passou. Descendente e
+// não filho direto (`[&_svg]`, não `[&>svg]`) porque a app pode embrulhar o ícone: o campo de busca
+// põe um `<button>` no meio. E `h-4 w-4` em vez de `size-4`, porque `size-*` só existe do Tailwind
+// 3.4 em diante e há app desta linha pinada em 3.3.0, onde a classe não seria gerada.
+//
+// Os 8px até o valor saem do padding do **campo**, não do adorno: um filho `w-full` — o botão do
+// campo de busca — ocuparia a caixa de conteúdo inteira e comeria um padding posto aqui.
+//
+// `shrink-0` porque o adorno é item flex: sem ele o `w-7` é só uma base e o navegador comprime a
+// caixa quando o campo é estreito, levando a geometria junto.
+const borderlessKomeaIcon = 'komea:[&_svg]:h-4 komea:[&_svg]:w-4'
+
+export const prefixBorderlessKomeaClasses = `komea:w-7 komea:shrink-0 komea:justify-start komea:pl-3 ${borderlessKomeaIcon}`
+
+export const sufixBorderlessKomeaClasses = `komea:w-7 komea:shrink-0 komea:justify-end komea:pr-3 ${borderlessKomeaIcon}`
+
 export const prefixClasses = `${adornmentClasses} rounded-l left-0`
 
 export const sufixClasses = `${adornmentClasses} rounded-r right-0`

package/src/Indicators/Toast/Toast.tsx

@@ -34,7 +34,7 @@ const Container = () => {
   return (
     <ToastContainer
       toastClassName={(props) =>
-        `mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md ${
+        `mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md overflow-hidden ${
           contextClass[props?.type || 'info']
         }`
       }

package/src/Layout/Box/Components/Header/BoxHeader.tsx

@@ -30,7 +30,7 @@ export const BoxHeader = React.memo(
             >
               <div className="flex-1 min-w-0 mr-2">
                 {title && (
-                  <h3 className="text-f5 font-medium break-words lg:text-f4">
+                  <h3 className="text-f5 font-semibold komea:font-medium break-words lg:text-f4">
                     {title}
                   </h3>
                 )}