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

package/src/components/index.ts

@@ -34,10 +34,10 @@ 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';
@@ -170,10 +170,10 @@ export const components: ComponentsMap = {
   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,
@@ -299,7 +299,7 @@ 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;
@@ -427,7 +427,7 @@ 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,5 +1,5 @@
 <template>
-  <PopoverPortal :to="portalTarget">
+  <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
       :style="{ width: contentWidth, zIndex: popoverZIndex }"
@@ -35,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,
@@ -65,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 };

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

@@ -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,

package/src/stories/ModalDialog.stories.js

@@ -1,9 +1,6 @@
 import UnnnicModalDialog from '../components/ModalDialog/ModalDialog.vue';
 import UnnnicInput from '../components/Input/Input.vue';
 import UnnnicLabel from '../components/Label/Label.vue';
-import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
-import UnnnicSwitch from '../components/Switch/Switch.vue';
-import UnnnicButton from '../components/Button/Button.vue';
 
 import { action } from '@storybook/addon-actions';
 import iconsList from '../utils/iconList';
@@ -185,85 +182,6 @@ const TemplateLeftSidebar = (args) => ({
   },
 });
 
-const TemplateWithDatePicker = (args) => ({
-  components: {
-    UnnnicModalDialog,
-    UnnnicInputDatePicker,
-    UnnnicSwitch,
-    UnnnicButton,
-  },
-  setup() {
-    const updateModelValue = (value) => {
-      action('update:modelValue')(value);
-      args.modelValue = value;
-    };
-    return { args, updateModelValue };
-  },
-  data() {
-    return {
-      forms: [{ date: { start: null, end: null }, repeat: false }],
-      isLoading: false,
-    };
-  },
-  template: `
-  <div>
-    <button @click="updateModelValue(true)">Open Modal with DatePicker</button>
-    <unnnic-modal-dialog 
-      v-bind="args" 
-      @primaryButtonClick="handleSave" 
-      @secondaryButtonClick="secondaryButtonClick" 
-      @update:modelValue="updateModelValue"
-    >
-      <section style="display: flex; flex-direction: column; gap: 16px;">
-        <section 
-          v-for="(form, index) in forms"
-          :key="index"
-          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #E2E6ED; border-radius: 8px;"
-        >
-          <section style="display: flex; flex-direction: column; gap: 8px;">
-            <p style="font-family: 'Lato'; font-size: 14px; font-weight: 600; margin: 0; color: #3B414D;">
-              Select date or period
-            </p>
-            <UnnnicInputDatePicker
-              v-model="form.date"
-              :options="[{ id: 'custom', name: 'Custom' }]"
-              next
-              fillW
-              actionText="Confirm"
-              disableClear
-            />
-          </section>
-          <UnnnicSwitch
-            v-model="form.repeat"
-            textRight="Repeat annually"
-            size="small"
-          />
-        </section>
-        <UnnnicButton
-          iconCenter="add-1"
-          type="tertiary"
-          text="Add"
-          @click="addForm"
-        />
-      </section>
-    </unnnic-modal-dialog>
-  </div>
-  `,
-  methods: {
-    primaryButtonClick: action('primaryButtonClick'),
-    secondaryButtonClick: action('secondaryButtonClick'),
-    handleSave() {
-      action('primaryButtonClick')();
-      action('save')(this.forms);
-      console.log('Forms data:', this.forms);
-    },
-    addForm() {
-      this.forms.push({ date: { start: null, end: null }, repeat: false });
-      action('addForm')();
-    },
-  },
-});
-
 export const Default = Template.bind({});
 Default.args = {
   title: 'Default Modal',
@@ -343,16 +261,3 @@ Image.args = {
   },
   showActionsDivider: true,
 };
-
-export const WithDatePicker = TemplateWithDatePicker.bind({});
-WithDatePicker.args = {
-  title: 'Add Non-Working Dates',
-  type: '',
-  primaryButtonProps: {
-    text: 'Save',
-    loading: false,
-  },
-  secondaryButtonProps: {
-    text: 'Cancel',
-  },
-};