@weni/unnnic-system 3.12.6-alpha-teleports.0 → 3.12.8-alpha.0

package/src/components/index.ts

@@ -28,15 +28,16 @@ import checkbox from './Checkbox/Checkbox.vue';
 import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
+import radioGroup from './RadioGroup/RadioGroup.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
 import modal from './Modal/Modal.vue';
 import modalUpload from './ModalUpload/ModalUpload.vue';
 import { callAlert, callModal } from '../utils/call';
 import selectSmart from './SelectSmart/SelectSmart.vue';
-// import select from './Select/Select.vue';
+import select from './Select/index.vue';
 import selectItem from './Select/SelectItem.vue';
 // import selectListItem from './SelectListItem/SelectListItem.vue';
-import multiSelect from './MultiSelect/MultiSelect.vue';
+import multiSelect from './MultiSelect/index.vue';
 import alert from './Alert/Alert.vue';
 // import autocomplete from './Input/Autocomplete.vue';
 // import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
@@ -162,16 +163,17 @@ export const components: ComponentsMap = {
   unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
+  unnnicRadioGroup: radioGroup,
   unnnicLanguageSelect: languageSelect,
   unnnicModal: modal,
   unnnicModalNext: ModalNext,
   unnnicModalDialog: ModalDialog,
   unnnicModalUpload: modalUpload,
   unnnicSelectSmart: selectSmart,
-  // unnnicSelect: select,
+  unnnicSelect: select,
   unnnicSelectItem: selectItem,
   // unnnicSelectListItem: selectListItem,
-  unnnicMultiSelect: multiSelect,
+  unnnicMultiSelect: multiSelect as VueComponent,
   unnnicAlert: alert,
   unnnicCallAlert: callAlert,
   unnnicCallModal: callModal,
@@ -290,13 +292,14 @@ export const unnnicCheckbox = checkbox;
 export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
+export const unnnicRadioGroup = radioGroup;
 export const unnniclanguageSelect = languageSelect as VueComponent;
 export const unnnicModal = modal;
 export const unnnicModalDialog = ModalDialog;
 export const unnnicModalNext = ModalNext;
 export const unnnicModalUpload = modalUpload;
 export const unnnicSelectSmart = selectSmart as VueComponent;
-// export const unnnicSelect = select;
+export const unnnicSelect = select as VueComponent;
 export const unnnicSelectItem = selectItem;
 // export const unnnicSelectListItem = selectListItem;
 export const unnnicMultiSelect = multiSelect as VueComponent;
@@ -417,13 +420,14 @@ export const UnnnicCheckbox = checkbox;
 export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
+export const UnnnicRadioGroup = radioGroup;
 export const UnnniclanguageSelect = languageSelect as VueComponent;
 export const UnnnicModal = modal;
 export const UnnnicModalDialog = ModalDialog;
 export const UnnnicModalNext = ModalNext;
 export const UnnnicModalUpload = modalUpload;
 export const UnnnicSelectSmart = selectSmart as VueComponent;
-// export const UnnnicSelect = select;
+export const UnnnicSelect = select as VueComponent;
 export const UnnnicSelectItem = selectItem;
 // export const UnnnicSelectListItem = selectListItem;
 export const UnnnicMultiSelect = multiSelect as VueComponent;

package/src/components/ui/dialog/DialogContent.vue

@@ -11,7 +11,6 @@ import {
 } from 'reka-ui';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   name: 'UnnnicDialogContent',
@@ -37,9 +36,8 @@ const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const overlayZIndex = useLayerZIndex({ offset: -2 });
-const modalZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
+const overlayZIndex = useLayerZIndex('modal', { offset: -2 });
+const modalZIndex = useLayerZIndex('modal');
 
 const contentClasses = computed(() =>
   cn(
@@ -61,7 +59,7 @@ const ConditionalWrapper: Component = (_, { slots }) => {
 </script>
 
 <template>
-  <DialogPortal :to="portalTarget">
+  <DialogPortal>
     <DialogOverlay
       class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       :style="{ zIndex: overlayZIndex }"
@@ -97,6 +95,8 @@ const ConditionalWrapper: Component = (_, { slots }) => {
   top: 50%;
   left: 50%;
 
+  overflow: hidden;
+
   transform: translate(-50%, -50%);
 
   width: 100%;

package/src/components/ui/drawer/DrawerContent.vue

@@ -6,7 +6,6 @@ import { useForwardPropsEmits } from 'reka-ui';
 import { DrawerContent, DrawerPortal } from 'vaul-vue';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 import DrawerOverlay from './DrawerOverlay.vue';
 
 defineOptions({
@@ -32,12 +31,11 @@ const emits = defineEmits<DialogContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
 
-const layerZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
+const layerZIndex = useLayerZIndex('drawer');
 </script>
 
 <template>
-  <DrawerPortal :to="portalTarget">
+  <DrawerPortal>
     <DrawerOverlay
       v-if="showOverlay"
       :style="{ zIndex: layerZIndex - 2 }"

package/src/components/ui/popover/PopoverContent.vue

@@ -1,15 +1,14 @@
 <template>
-  <PopoverPortal :to="portalTarget">
+  <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
+      :style="{ width: contentWidth, zIndex: popoverZIndex }"
       :class="
         cn(
           'unnnic-popover',
-          `unnnic-popover--size-${props.size}`,
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
-      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -36,7 +35,6 @@ import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   inheritAttrs: false,
@@ -46,7 +44,8 @@ const props = withDefaults(
   defineProps<
     PopoverContentProps & {
       class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
+      size?: string;
+      width?: string;
     }
   >(),
   {
@@ -54,6 +53,7 @@ const props = withDefaults(
     sideOffset: 4,
     size: 'medium',
     class: '',
+    width: '',
   },
 );
 const emits = defineEmits<PopoverContentEmits>();
@@ -64,8 +64,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const slots = useSlots() as Slots;
 
-const popoverZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
+const popoverZIndex = useLayerZIndex('popover');
 
 const getComponentName = (vnode: VNode): string | undefined => {
   const componentType = vnode.type as { name?: string; __name?: string };
@@ -85,6 +84,18 @@ const footerChildren = computed(() => {
     (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
   );
 });
+
+const contentWidth = computed(() => {
+  if (props.width) return props.width;
+
+  const sizes = {
+    small: '240px',
+    medium: '320px',
+    large: '400px',
+  };
+
+  return sizes[props.size as keyof typeof sizes];
+});
 </script>
 
 <style lang="scss">
@@ -95,15 +106,20 @@ $popover-space: $unnnic-space-4;
 .unnnic-popover {
   border-radius: $unnnic-radius-2;
   box-shadow: $unnnic-shadow-1;
+  border: 1px solid $unnnic-color-border-soft;
 
-  &--size-small {
-    width: 240px;
+  &::-webkit-scrollbar {
+    width: $unnnic-spacing-inline-nano;
   }
-  &--size-medium {
-    width: 320px;
+
+  &::-webkit-scrollbar-thumb {
+    background: $unnnic-color-neutral-cleanest;
+    border-radius: $unnnic-border-radius-pill;
   }
-  &--size-large {
-    width: 400px;
+
+  &::-webkit-scrollbar-track {
+    background: $unnnic-color-neutral-soft;
+    border-radius: $unnnic-border-radius-pill;
   }
 
   &__content {

package/src/components/ui/popover/PopoverOption.vue

@@ -76,7 +76,7 @@ const schemeColor = computed(() => {
 .unnnic-popover-option {
   cursor: pointer;
   border-radius: $unnnic-radius-2;
-  padding: $unnnic-space-2;
+  padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
   display: flex;
   gap: $unnnic-space-2;
@@ -98,6 +98,10 @@ const schemeColor = computed(() => {
   }
 
   &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     @each $name, $color in $unnnic-scheme-colors {
       &.unnnic-popover-option__label--#{$name} {
         color: $color;

package/src/components/ui/tooltip/TooltipContent.vue

@@ -10,7 +10,6 @@ import {
 } from 'reka-ui';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   inheritAttrs: false,
@@ -20,7 +19,6 @@ const props = withDefaults(
   defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 0,
-    class: undefined,
   },
 );
 
@@ -29,12 +27,11 @@ const emits = defineEmits<TooltipContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
-const tooltipZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
+const tooltipZIndex = useLayerZIndex('tooltip');
 </script>
 
 <template>
-  <TooltipPortal :to="portalTarget">
+  <TooltipPortal>
     <TooltipContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -17,8 +17,10 @@ const props = defineProps<TooltipTriggerProps>();
 
 <style lang="scss" scoped>
 .unnnic-tooltip-trigger {
-  position: relative;
   display: inline-block;
-  overflow-wrap: break-word;
+
+  & > * {
+    width: 100%;
+  }
 }
 </style>

package/src/index.ts

@@ -1,21 +1,14 @@
 import type { App } from 'vue';
 import { components } from '@/components';
 import './assets/scss/tailwind.scss';
-import { setTeleportTarget, type TeleportTarget } from '@/lib/teleport-target';
 
 interface UnnnicPlugin {
-  install(app: App, options?: UnnnicPluginOptions): void;
+  install(app: App): void;
   [key: string]: any;
 }
 
-export interface UnnnicPluginOptions {
-  teleportTarget?: TeleportTarget | null;
-}
-
 const Unnnic: UnnnicPlugin = {
-  install(app: App, options?: UnnnicPluginOptions) {
-    setTeleportTarget(options?.teleportTarget ?? null);
-
+  install(app: App) {
     Object.keys(components).forEach((name) => {
       app.component(name, components[name] as any);
     });

package/src/lib/layer-manager.ts

@@ -1,37 +1,62 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
 
-const BASE_LAYER_Z_INDEX = 1000;
+export const layerScale = {
+  hide: -1,
+  base: 0,
+  drawer: 1000,
+  modal: 1100,
+  popover: 1200,
+  tooltip: 1300,
+  toast: 1400,
+} as const;
+
+export type LayerToken = keyof typeof layerScale;
+
 const DEFAULT_STEP = 5;
 
-const layerStack: number[] = [];
-const layerHandles = new Map<symbol, number>();
+const activeValues: Record<LayerToken, number[]> = {
+  hide: [],
+  base: [],
+  drawer: [],
+  modal: [],
+  popover: [],
+  tooltip: [],
+  toast: [],
+};
 
-interface LayerHandle {
+interface Allocation {
   id: symbol;
+  type: LayerToken;
   value: number;
 }
 
-function pushLayer(): LayerHandle {
+const allocations = new Map<symbol, Allocation>();
+
+function acquire(type: LayerToken): Allocation {
   const id = Symbol('layer');
-  const lastValue = layerStack.length
-    ? layerStack[layerStack.length - 1]
-    : BASE_LAYER_Z_INDEX;
+  const list = activeValues[type];
+  const lastValue = list.length ? list[list.length - 1] : layerScale[type];
   const value = lastValue + DEFAULT_STEP;
-  layerStack.push(value);
-  layerHandles.set(id, value);
-  return { id, value };
+  const allocation: Allocation = { id, type, value };
+
+  list.push(value);
+  allocations.set(id, allocation);
+
+  return allocation;
 }
 
-function popLayer(id: symbol) {
-  const value = layerHandles.get(id);
-  if (value === undefined) {
+function release(id: symbol) {
+  const allocation = allocations.get(id);
+  if (!allocation) {
     return;
   }
 
-  layerHandles.delete(id);
-  const index = layerStack.indexOf(value);
+  allocations.delete(id);
+  const list = activeValues[allocation.type];
+  const index = list.indexOf(allocation.value);
+
   if (index !== -1) {
-    layerStack.splice(index, 1);
+    list.splice(index, 1);
   }
 }
 
@@ -39,23 +64,26 @@ export interface LayerZIndexOptions {
   offset?: number;
 }
 
-export function useLayerZIndex(options?: LayerZIndexOptions): Ref<number> {
-  const offset = options?.offset ?? 0;
-  const zIndex = ref(BASE_LAYER_Z_INDEX + offset);
+export function useLayerZIndex(
+  type: LayerToken = 'base',
+  options?: LayerZIndexOptions,
+): Ref<number> {
+  const initialValue = layerScale[type] + (options?.offset ?? 0);
+  const zIndex = ref(initialValue);
 
   let allocationId: symbol | null = null;
 
   const allocate = () => {
-    const handle = pushLayer();
-    allocationId = handle.id;
-    zIndex.value = handle.value + offset;
+    const allocation = acquire(type);
+    allocationId = allocation.id;
+    zIndex.value = allocation.value + (options?.offset ?? 0);
   };
 
   onMounted(allocate);
 
   onBeforeUnmount(() => {
     if (allocationId) {
-      popLayer(allocationId);
+      release(allocationId);
       allocationId = null;
     }
   });

package/src/locales/en.json

@@ -44,5 +44,7 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  }
+  },
+  "search": "Search",
+  "without_results": "No results found"
 }

package/src/locales/es.json

@@ -44,5 +44,7 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar",
+  "without_results": "No se encontró ningún resultado"
 }

package/src/locales/pt_br.json

@@ -44,5 +44,7 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar",
+  "without_results": "Nenhum resultado encontrado"
 }

package/src/stories/Input.mdx

@@ -42,6 +42,9 @@ The `Input` component is designed to provide an input field for users to enter t
 | placeholder | `String` of the native input placeholder | `String`                 | `''`        |
 | iconLeft    | `String` of the left icon                | `String`                 | `undefined` |
 | iconRight   | `String` of the right icon               | `String`                 | `false`     |
+| useFocusProp | `Boolean` to enable use focus by prop (ignore native css) | `true` \| `false` | `false` |
+| focus | `Boolean` to enable focus component status | `true` \| `false` | `false` |
+
 
 ## Example
 Some examples of uses of the `UnnnicInput`

package/src/stories/LayerManager.docs.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # Layer Manager Overview
 
-The layer manager exists to keep every teleported component (dialogs, drawers, popovers, tooltips, toasts, etc.) in a predictable stacking order without sprinkling arbitrary `z-index: 9999` rules across the codebase. Instead of assigning fixed bands per component type, we keep a single global stack that increments as layers mount. [Reference](https://v1.chakra-ui.com/docs/components/recipes/z-index)
+The layer manager exists to keep every teleported component (dialogs, drawers, popovers, tooltips, toasts, etc.) in a predictable stacking order without sprinkling arbitrary `z-index: 9999` rules across the codebase. Defining semantic bands (drawer, modal, popover, tooltip, toast) and allocating values automatically whenever a component mounts. [Reference](https://v1.chakra-ui.com/docs/components/recipes/z-index)
 
 ## Why avoid manual z-index values?
 
@@ -14,25 +14,25 @@ The layer manager exists to keep every teleported component (dialogs, drawers, p
 
 ## How it works here
 
-1. **Single base (1000)** – all teleported layers share the same starting point, which keeps the implementation simple and predictable.
-2. **Auto-increment** – every time a component mounts, it receives the next value in the global stack so the newest element always sits on top, regardless of type.
-3. **Scoped offsets** – overlays that belong to the same surface (e.g., `DialogOverlay` vs. `DialogContent`) call `useLayerZIndex({ offset: -2 })` so the overlay sits just beneath the content that spawned it.
+1. **Tokens, not numbers** – components request a token such as `modal`, `popover`, or `tooltip`. The manager maps those tokens to a base band (e.g., modals start at 1200, popovers at 1400).
+2. **Auto-increment** – every time a component mounts, it receives the next value in its band so nested dialogs or infinite toasts still stack correctly.
+3. **Scoped offsets** – overlays that belong to the same surface (e.g., `DialogOverlay` vs `DialogContent`) simply call `useLayerZIndex` with a small negative offset so the overlay sits just beneath the content that opened it.
 
 ```
-const modalZ = useLayerZIndex();
-const overlayZ = useLayerZIndex({ offset: -2 });
+const modalZ = useLayerZIndex('modal');
+const overlayZ = useLayerZIndex('modal', { offset: -2 });
 ```
 
 ## Benefits
 
-- **Deterministic ordering** – the last overlay opened is always on top, no matter if it is a drawer, modal, popover, or toast.
-- **Safer refactors** – no need to chase down hard-coded z-index constants across the codebase; everything flows through the same stack.
+- **Deterministic ordering** – open a drawer, then a popover, then a dialog, then a tooltip and the visual order will always follow the semantic bands.
+- **Safer refactors** – tokens can be remapped (e.g., raise the entire `tooltip` band) without touching every component.
 
 ## When to override
 
 In rare cases you might still need a custom `z-index`. Prefer to:
 
-1. Add a dedicated offset (e.g., `useLayerZIndex({ offset: X })`) if the overlay needs to sit just above/below a sibling.
+1. Add a new token in the layer manager if the surface fits the existing pattern (e.g., `tour`).
 2. Only apply inline overrides for truly one-off cases, and document why the global manager does not work there.
 
 

package/src/stories/LayerManager.stories.js

@@ -48,7 +48,7 @@ export default {
 };
 
 export const DialogWithTooltipAndPopover = {
-  name: 'Dialog > Tooltip + Popover',
+  name: 'Dialog + Tooltip + Popover',
   render: () => ({
     components: {
       Dialog,
@@ -110,7 +110,7 @@ export const DialogWithTooltipAndPopover = {
 };
 
 export const DrawerWithTooltipAndPopover = {
-  name: 'Drawer > Tooltip + Popover',
+  name: 'Drawer + Tooltip + Popover',
   render: () => ({
     components: {
       Drawer,
@@ -174,7 +174,7 @@ export const DrawerWithTooltipAndPopover = {
 };
 
 export const DrawerNextToDialog = {
-  name: 'Drawer > Dialog',
+  name: 'Drawer + Dialog',
   render: () => ({
     components: {
       Drawer,
@@ -188,6 +188,8 @@ export const DrawerNextToDialog = {
       DialogContent,
       DialogHeader,
       DialogTitle,
+      DialogFooter,
+      DialogClose,
       UnnnicButton,
     },
     setup() {
@@ -222,6 +224,11 @@ export const DrawerNextToDialog = {
             <div style="padding: 24px; color: #67738B;">
               This dialog must appear above the drawer and its overlay.
             </div>
+            <DialogFooter>
+              <DialogClose>
+                <UnnnicButton text="Close dialog" type="tertiary" />
+              </DialogClose>
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       </div>
@@ -229,56 +236,6 @@ export const DrawerNextToDialog = {
   }),
 };
 
-export const DrawerOpenedFromDialog = {
-  name: 'Dialog > Drawer',
-  render: () => ({
-    components: {
-      UnnnicButton,
-      Dialog,
-      DialogContent,
-      DialogHeader,
-      DialogTitle,
-      Drawer,
-      DrawerContent,
-      DrawerHeader,
-      DrawerTitle,
-      DrawerDescription,
-    },
-    setup() {
-      const dialogOpen = ref(false);
-      const drawerOpen = ref(false);
-      return { dialogOpen, drawerOpen };
-    },
-    template: `
-      <div>
-        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
-          <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
-        </div>
-        <Dialog v-model:open="dialogOpen">
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Dialog</DialogTitle>
-            </DialogHeader>
-            <div style="padding: 24px; color: #67738B;">
-              <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" /> 
-            </div>
-          </DialogContent>
-        </Dialog>
-        <Drawer v-model:open="drawerOpen">
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerTitle>Drawer</DrawerTitle>
-            </DrawerHeader>
-            <div style="padding: 24px; color: #67738B;">
-              Drawer should appear above the dialog.
-            </div>
-          </DrawerContent>
-        </Drawer>
-      </div>
-    `,
-  }),
-};
-
 export const NestedDialogs = {
   name: 'Dialog nested',
   render: () => ({
@@ -346,7 +303,7 @@ export const NestedDialogs = {
 };
 
 export const DialogWithToast = {
-  name: 'Dialog > Toast',
+  name: 'Dialog + Toast',
   render: () => ({
     components: {
       Dialog,