@weni/unnnic-system 3.11.0 → 3.11.1-alpha.0

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,10 @@
+export { default as Drawer } from './Drawer.vue';
+export { default as DrawerContent } from './DrawerContent.vue';
+export { default as DrawerDescription } from './DrawerDescription.vue';
+export { default as DrawerFooter } from './DrawerFooter.vue';
+export { default as DrawerHeader } from './DrawerHeader.vue';
+export { default as DrawerOverlay } from './DrawerOverlay.vue';
+export { default as DrawerTitle } from './DrawerTitle.vue';
+export { default as DrawerTrigger } from './DrawerTrigger.vue';
+export { default as DrawerClose } from './DrawerClose.vue';
+export { DrawerPortal } from 'vaul-vue';

package/src/components/ui/segmented-control/SegmentedControlList.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { provide, computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    TabsListProps & {
+      size?: 'small' | 'medium';
+      class?: HTMLAttributes['class'];
+    }
+  >(),
+  {
+    size: 'medium',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+provide(
+  'segmented-control-size',
+  computed(() => props.size),
+);
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-segmented-control-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-segmented-control-list {
+  padding: $unnnic-space-1;
+
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-1;
+
+  border-radius: $unnnic-radius-2;
+  background-color: $unnnic-color-bg-soft;
+}
+</style>

package/src/components/ui/segmented-control/SegmentedControlTrigger.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes, ComputedRef } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { inject, computed } from 'vue';
+
+const props = defineProps<
+  TabsTriggerProps & {
+    size?: 'small' | 'medium';
+    class?: HTMLAttributes['class'];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const injectedSize = inject<ComputedRef<'small' | 'medium'>>(
+  'segmented-control-size',
+);
+const currentSize = computed(
+  () => props.size ?? injectedSize?.value ?? 'medium',
+);
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'unnnic-segmented-control-trigger',
+        `unnnic-segmented-control-trigger--${currentSize}`,
+        'transition-all',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-segmented-control-trigger {
+  width: 100%;
+
+  border: 1px solid $unnnic-color-bg-soft;
+
+  padding: $unnnic-space-2 $unnnic-space-4;
+
+  background-color: $unnnic-color-bg-soft;
+  border-radius: $unnnic-radius-1;
+
+  font: $unnnic-font-emphasis;
+  color: $unnnic-color-fg-base;
+
+  cursor: pointer;
+
+  &[data-state='active'] {
+    border-color: $unnnic-color-border-soft;
+    background-color: $unnnic-color-bg-base;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &:disabled {
+    color: $unnnic-color-fg-muted;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &--small {
+    font: $unnnic-font-caption-1;
+  }
+}
+</style>

package/src/components/ui/segmented-control/index.ts

@@ -0,0 +1,4 @@
+export { default as SegmentedControl } from '../tabs/Tabs.vue';
+export { default as SegmentedControlContent } from '../tabs/TabsContent.vue';
+export { default as SegmentedControlList } from './SegmentedControlList.vue';
+export { default as SegmentedControlTrigger } from './SegmentedControlTrigger.vue';

package/src/components/ui/tabs/TabsTrigger.vue

@@ -4,7 +4,6 @@ import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { TabsTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
-import { computed } from 'vue';
 
 const props = defineProps<
   TabsTriggerProps & { class?: HTMLAttributes['class'] }
@@ -13,28 +12,12 @@ const props = defineProps<
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwardedProps = useForwardProps(delegatedProps);
-
-const classes = computed(() => {
-  const defaultClasses = ['unnnic-tabs-trigger'];
-
-  if (props.disabled) {
-    defaultClasses.push('unnnic-tabs-trigger--disabled');
-  }
-
-  return defaultClasses;
-});
 </script>
 
 <template>
   <TabsTrigger
     v-bind="forwardedProps"
-    :class="
-      cn(
-        ...classes,
-        'transition-all disabled:pointer-events-none disabled:opacity-50',
-        props.class,
-      )
-    "
+    :class="cn('unnnic-tabs-trigger', 'transition-all', props.class)"
   >
     <span class="unnnic-tabs-trigger__content truncate">
       <slot />
@@ -62,11 +45,12 @@ const classes = computed(() => {
       $unnnic-color-border-active;
   }
 
-  &--disabled {
+  &:disabled {
     color: $unnnic-color-fg-muted;
+    cursor: not-allowed;
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: $unnnic-color-fg-emphasized;
   }
 

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 0,
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'tooltip__content',
+          'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+
+      <TooltipArrow class="tooltip__arrow" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+.tooltip__content {
+  z-index: 10001;
+
+  background-color: $unnnic-color-gray-900;
+  color: $unnnic-color-white;
+  border-radius: $unnnic-radius-1;
+  padding: $unnnic-space-2;
+  box-shadow: $unnnic-shadow-1;
+  font: $unnnic-font-caption-2;
+
+  overflow-wrap: break-word;
+}
+
+.tooltip__arrow {
+  width: 10px;
+  height: 10px;
+  background-color: $unnnic-color-gray-900;
+  fill: $unnnic-color-gray-900;
+  transform: rotate(45deg) translate(-50%, -50%);
+}
+</style>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider
+    v-bind="props"
+    :delayDuration="100"
+  >
+    <slot />
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui';
+import { TooltipTrigger } from 'reka-ui';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger
+    v-bind="props"
+    as="div"
+    class="unnnic-tooltip-trigger"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>
+
+<style lang="scss" scoped>
+.unnnic-tooltip-trigger {
+  display: inline-block;
+}
+</style>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';