Fix - Select inherit colors and z-order

apps/docs/src/index.stories.mdx

@@ -25,15 +25,7 @@ Visu é uma biblioteca de componentes e design system desenvolvida para os produ
 
 ## Instalação
 
-A biblioteca é publicada atualmente no Github Packages, então é necessário informar ao npm em qual registro buscar a biblioteca para a instalação, a melhor maneira de fazer isso é criar um arquivo na raiz do projeto e informar que o registro do Github será utilizado para todas as bibliotecas da organização @coaktion:
-
-1. Crie um arquivo `.npmrc` na raiz do projeto com o conteúdo
-
-```bash
-@coaktion:registry=https://npm.pkg.github.com
-```
-
-2. Instale a biblioteca no projeto React
+Instale a biblioteca em um projeto React com o comando
 
 ```bash
 npm install @droz-js/visu
@@ -43,23 +35,19 @@ npm install @droz-js/visu
 
 ### Componentes
 
-Para utilizar os componentes é necessário importar a estilização da biblioteca de `@droz-js/visu/styles`
+O Visu é construido utilizando o Tailwind CSS como base para a estilização dos componentes. Para utilizar os componentes corretamente é necessário ter o Tailwind CSS instalado no projeto. No arquivo `tailwind.config.js` o arquivo `@droz-js/visu/dist/visu.es.js` do Visu precisa ser adicionado ao content para que os componentes recebam as atualizações de estilização ao modificar alguma configuração do tema do Tailwind CSS.
 
 ```typescript
-import '@droz-js/visu/styles'
-```
-
-Caso esteja utilizando o `tailwindcss` no projeto, faça a importação da estilização da biblioteca juntamente da estilização do tailwindcss
+import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
+import type { Config } from 'tailwindcss'
 
-```css
-@import '@droz-js/visu/styles';
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@droz-js/visu/dist/visu.es.js'],
+} satisfies Config
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 ```
 
-Com a estilização importada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook](?path=/docs/componentes--docs)
+Com a configuração do `tailwind.config.js` realizada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook](?path=/docs/componentes--docs)
 
 ```typescript
 import { Button } from '@droz-js/visu'
@@ -81,7 +69,7 @@ import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@droz-js/visu/dist/visu.es.js'],
   plugins: [VisuTailwindcssPlugin],
 } satisfies Config
 

apps/web/src/index.css

@@ -1,4 +1,3 @@
-@import '@droz-js/visu/styles';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/web/tailwind.config.ts

@@ -2,6 +2,6 @@ import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  content: ['./index.html', './src/**/*.{ts,tsx}', '../../node_modules/@droz-js/visu/dist/visu.es.js'],
   plugins: [VisuTailwindcssPlugin],
 } satisfies Config

package.json

@@ -8,13 +8,13 @@
   ],
   "scripts": {
     "build": "turbo run build --no-cache",
-    "build:docs": "turbo run build --no-cache --filter=docs",
+    "build:docs": "turbo run build --no-cache --filter=@droz-js/visu-docs",
     "build:visu": "turbo run build --no-cache --filter=@droz-js/visu",
-    "build:web": "turbo run build --no-cache --filter=web",
+    "build:web": "turbo run build --no-cache --filter=@droz-js/visu-web",
     "dev": "turbo run dev --parallel --no-cache",
-    "dev:docs": "turbo run dev --parallel --no-cache --filter=docs",
+    "dev:docs": "turbo run dev --parallel --no-cache --filter=@droz-js/visu-docs",
     "dev:visu": "turbo run dev --parallel --no-cache --filter=@droz-js/visu",
-    "dev:web": "turbo run dev --parallel --no-cache --filter=web",
+    "dev:web": "turbo run dev --parallel --no-cache --filter=@droz-js/visu-web",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",
     "prepare": "husky install",

packages/visu/README.md

@@ -14,15 +14,7 @@ Visu é uma biblioteca de componentes e design system desenvolvida para os produ
 
 ## Instalação
 
-A biblioteca é publicada atualmente no Github Packages, então é necessário informar ao npm em qual registro buscar a biblioteca para a instalação, a melhor maneira de fazer isso é criar um arquivo na raiz do projeto e informar que o registro do Github será utilizado para todas as bibliotecas da organização @coaktion:
-
-1. Crie um arquivo `.npmrc` na raiz do projeto com o conteúdo
-
-```bash
-@coaktion:registry=https://npm.pkg.github.com
-```
-
-2. Instale a biblioteca no projeto React
+Instale a biblioteca em um projeto React com o comando
 
 ```bash
 npm install @droz-js/visu
@@ -32,23 +24,19 @@ npm install @droz-js/visu
 
 ### Componentes
 
-Para utilizar os componentes é necessário importar a estilização da biblioteca de `@droz-js/visu/styles`
+O Visu é construido utilizando o Tailwind CSS como base para a estilização dos componentes. Para utilizar os componentes corretamente é necessário ter o Tailwind CSS instalado no projeto. No arquivo `tailwind.config.js` o arquivo `@droz-js/visu/dist/visu.es.js` do Visu precisa ser adicionado ao content para que os componentes recebam as atualizações de estilização ao modificar alguma configuração do tema do Tailwind CSS.
 
 ```typescript
-import '@droz-js/visu/styles'
-```
-
-Caso esteja utilizando o `tailwindcss` no projeto, faça a importação da estilização da biblioteca juntamente da estilização do tailwindcss
+import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
+import type { Config } from 'tailwindcss'
 
-```css
-@import '@droz-js/visu/styles';
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@droz-js/visu/dist/visu.es.js'],
+} satisfies Config
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 ```
 
-Com a estilização importada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook(em construção)](https://feat-update-storybook-v7--645ce9be8ed7e2ea5066a152.chromatic.com/)
+Com a configuração do `tailwind.config.js` realizada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook(em construção)](https://feat-update-storybook-v7--645ce9be8ed7e2ea5066a152.chromatic.com/)
 
 ```typescript
 import { Button } from '@droz-js/visu'
@@ -70,7 +58,7 @@ import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@droz-js/visu/dist/visu.es.js'],
   plugins: [VisuTailwindcssPlugin],
 } satisfies Config
 

packages/visu/src/library/Select/Item.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@/src/utils/class-merge.helper'
 import * as RadixSelect from '@radix-ui/react-select'
-import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 
 export type SelectItemProps = RadixSelect.SelectItemProps
@@ -9,8 +9,9 @@ const SelectItem = forwardRef<HTMLInputElement, SelectItemProps>(
     return (
       <RadixSelect.Item
         ref={forwardedRef}
-        className={clsx(
-          'data-[state=checked]:text-primary hover:text-primary focus:text-primary data-[disabled]:text-gray cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded-lg px-3 py-2 transition-colors hover:bg-gray-300 focus:bg-gray-300 focus:outline-none active:outline-none data-[disabled]:pointer-events-none',
+        className={cn(
+          'cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded-lg px-3 py-2 transition-colors',
+          'hover:bg-gray-300 hover:text-primary focus:bg-gray-300 focus:text-primary focus:outline-none active:outline-none data-[disabled]:pointer-events-none data-[disabled]:text-gray data-[state=checked]:text-primary',
           className,
         )}
         {...rest}

packages/visu/src/library/Select/Root.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@/src/utils/class-merge.helper'
 import * as RadixSelect from '@radix-ui/react-select'
-import { clsx } from 'clsx'
 import { CaretDown } from 'phosphor-react'
 import { FC } from 'react'
 
@@ -9,23 +9,26 @@ const statusClassVariants = {
 }
 
 export interface SelectRootProps extends RadixSelect.SelectProps {
-  placeholder?: string
-  className?: string
-  onChange?: (value: string) => void
-  position?: RadixSelect.SelectContentProps['position']
   align?: RadixSelect.SelectContentProps['align']
+  className?: string
   full?: boolean
+  placeholder?: string
+  portalContainer?: HTMLElement | null
+  position?: RadixSelect.SelectContentProps['position']
   status?: keyof typeof statusClassVariants
+
+  onChange?: (value: string) => void
 }
 
 const SelectRoot: FC<SelectRootProps> = ({
+  align = 'center',
   children,
   className,
+  full,
   placeholder,
+  portalContainer,
   position = 'popper',
-  align = 'center',
   status,
-  full,
   value,
   onChange,
   onValueChange,
@@ -38,37 +41,40 @@ const SelectRoot: FC<SelectRootProps> = ({
       {...rest}
     >
       <RadixSelect.Trigger
-        className={clsx(
-          'disabled:text-gray min-h-10 active:border-primary data-[state=open]:border-primary flex items-center justify-between gap-4 rounded-lg border bg-transparent px-4 py-2 text-sm text-gray-900 transition-colors hover:border-gray-700 disabled:pointer-events-none disabled:bg-gray-200 [&[data-state=open]>div]:rotate-180 [&[data-state=open]_span:last-child]:rotate-180',
-          !value && 'text-gray',
+        className={cn(
+          'group flex min-h-10 items-center justify-between gap-4 rounded-lg border bg-transparent px-4 py-2 text-sm text-inherit transition-colors',
+          'hover:border-gray-700 active:border-primary disabled:pointer-events-none disabled:bg-gray-200 disabled:text-gray data-[state=open]:border-primary data-[placeholder]:text-gray [&[data-state=open]>div]:rotate-180 [&[data-state=open]_span:last-child]:rotate-180',
           full ? 'w-full' : 'w-fit',
           status ? statusClassVariants[status] : 'border-gray',
           className,
         )}
       >
         <span className="overflow-hidden text-ellipsis whitespace-nowrap">
-          <RadixSelect.Value
-            placeholder={<span className="text-gray">{placeholder}</span>}
-          />
+          <RadixSelect.Value placeholder={placeholder} />
         </span>
-        <RadixSelect.Icon className="text-primary transition-all">
+        <RadixSelect.Icon
+          className={cn(
+            'text-inherit transition-all',
+            'group-data-[state=open]:text-primary',
+          )}
+        >
           <CaretDown />
         </RadixSelect.Icon>
       </RadixSelect.Trigger>
 
-      <RadixSelect.Portal>
+      <RadixSelect.Portal container={portalContainer}>
         <RadixSelect.Content
           position={position}
           align={align}
           sideOffset={5}
           collisionPadding={10}
-          className="border-gray flex min-w-[220px] !max-w-[calc(100vw-20px)] flex-col gap-2 rounded-lg border bg-gray-100 shadow"
+          className="z-100 flex min-w-[220px] !max-w-[calc(100vw-20px)] flex-col gap-2 rounded-lg border border-gray bg-gray-100 shadow"
         >
           <RadixSelect.Viewport className="p-3">
             {placeholder && (
               <RadixSelect.Item
                 value=""
-                className="text-gray pointer-events-none px-3 py-2"
+                className="pointer-events-none px-3 py-2 text-gray"
                 disabled
               >
                 <RadixSelect.ItemText>{placeholder}</RadixSelect.ItemText>

packages/visu/src/theme/theme-plugin.js

@@ -6,6 +6,7 @@ const {
   minHeight,
   minWidth,
   spacing,
+  zIndex,
 } = require('tailwindcss/defaultTheme')
 const plugin = require('tailwindcss/plugin')
 
@@ -173,6 +174,11 @@ module.exports = plugin(
         34: '8.5rem',
         156: '39rem',
       },
+
+      zIndex: {
+        ...zIndex,
+        100: '100',
+      },
     },
   },
 )

packages/visu/src/utils/class-merge.helper.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...args: ClassValue[]) {
+  return twMerge(clsx(args))
+}