adata-ui 2.1.0 → 2.1.2

package/components/navigation/header/AlmatyContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.almaty.title') }}
     </h2>
@@ -10,7 +11,7 @@
           class="flex flex-col gap-2 "
         >
           <div class="heading-04">
-            {{ t(item.title) }}
+            {{ item.title }}
           </div>
           <a
             class="flex items-center gap-1 text-deepblue-900 dark:text-white"
@@ -21,7 +22,7 @@
               class="shrink-0"
             />
             <div class=" body-400">
-              {{ t(item.subtitle) }}
+              {{ item.subtitle }}
             </div>
           </a>
         </div>
@@ -60,7 +61,7 @@
                 target="_blank"
               >
                 <div class="body-400 line-clamp-1 text-blue-600">
-                  {{ t(link.subtitle) }}
+                  {{ link.subtitle }}
                 </div>
                 <component
                   :is="link.icon"
@@ -89,6 +90,7 @@
 <!--      </div>-->
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">
@@ -103,33 +105,33 @@ import {useContacts} from "#adata-ui/composables/projectState";
 
 const {t} = useI18n()
 const contacts = ref(useContacts())
-const AlmatyItems = [
+const AlmatyItems = computed(() => ([
   {
-    title: 'header.contacts.almaty.adress.title',
-    subtitle: 'header.contacts.almaty.adress.subtitle',
+    title: t('header.contacts.almaty.adress.title'),
+    subtitle: t('header.contacts.almaty.adress.subtitle'),
     icon: Location,
     to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
   },
   {
-    title: 'header.contacts.almaty.email.title',
+    title: t('header.contacts.almaty.email.title'),
     subtitle: 'info@adata.kz',
     icon: Mail,
     to: 'mailto:info@adata.kz'
   },
   {
-    title: 'header.contacts.almaty.schedule.title',
-    subtitle: 'header.contacts.almaty.schedule.subtitle',
+    title: t('header.contacts.almaty.schedule.title'),
+    subtitle: t('header.contacts.almaty.schedule.subtitle'),
     icon: Clock,
   },
-]
+]))
 
-const technicalSupport = [
+const technicalSupport = computed(() => ([
   {
-    subtitle: 'header.contacts.almaty.support.linkTitle',
+    subtitle: t('header.contacts.almaty.support.linkTitle'),
     icon: ExpandWindow,
     to: "https://api.whatsapp.com/send/?phone=77712289041"
   }
-]
+]))
 
 const newContacts = computed(()=> contacts.value.map(item => ({
   subtitle: item.contact,

package/components/navigation/header/AstanaContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.astana.title') }}
     </h2>
@@ -7,7 +8,7 @@
       <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
         <div v-for="(item, index) in AstanaItems" class="flex flex-col gap-2 " :class="{'col-span-2':index===0 }">
           <div class="heading-04">
-            {{ t(item.title) }}
+            {{ item.title }}
           </div>
           <a
             class="flex items-center gap-1 text-deepblue-900 dark:text-white"
@@ -16,13 +17,14 @@
           >
             <component :is="item.icon"/>
             <div class=" body-400">
-              {{ t(item.subtitle) }}
+              {{ item.subtitle }}
             </div>
           </a>
         </div>
       </div>
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">
@@ -33,31 +35,31 @@ import Clock from "#adata-ui/icons/clock.vue";
 import Whatsapp from "#adata-ui/icons/whatsapp.vue";
 
 const {t} = useI18n()
-const AstanaItems = [
+const AstanaItems = computed(() => ([
   {
-    title: 'header.contacts.astana.adress.title',
-    subtitle: 'header.contacts.astana.adress.subtitle',
+    title: t('header.contacts.astana.adress.title'),
+    subtitle: t('header.contacts.astana.adress.subtitle'),
     icon: Location,
     to: 'https://yandex.kz/maps/ru/org/adata_consulting/214484722242/?ll=71.429573%2C51.131319&z=20.56'
   },
   {
-    title: 'header.contacts.astana.email.title',
+    title: t('header.contacts.astana.email.title'),
     subtitle: 'info@adata-c.kz',
     icon: Mail,
     to: 'mailto:info@adata-c.kz'
   },
   {
-    title: 'header.contacts.astana.schedule.title',
-    subtitle: 'header.contacts.astana.schedule.subtitle',
+    title: t('header.contacts.astana.schedule.title'),
+    subtitle: t('header.contacts.astana.schedule.subtitle'),
     icon: Clock,
   },
   {
-    title: 'header.contacts.astana.sellDep.title',
+    title: t('header.contacts.astana.sellDep.title'),
     subtitle: '+7 700 744 00 10',
     icon: Whatsapp,
     to: "https://api.whatsapp.com/send/?phone=77007440010"
   },
-]
+]))
 </script>
 
 <style scoped>

package/components/navigation/header/CardGallery.vue

@@ -2,8 +2,9 @@
 import { AIconArrowCircleDown, AIconGlobe, AIconId, AIconArrowSideUp } from '#components'
 import { PAGES } from '#adata-ui/shared/constans/pages'
 import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
-const { myLayer } = useAppConfig()
+const urls = useUrls()
 const { t, locale } = useI18n()
 const colorMode = useColorMode()
 const computedColorMode = computed(() => colorMode.value)
@@ -13,21 +14,21 @@ const items = computed(()=>{
     {
       title: 'header.products.galleryCards.unload.title',
       subtitle: 'header.products.galleryCards.unload.subtitle',
-      to: buildLocalizedUrl(locale, myLayer.pkUrl, PAGES.pk.unload),
+      to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.unload),
       image: '/header/unload.webp',
       icon: AIconArrowCircleDown,
     },
     {
       title: 'header.products.galleryCards.compliance.title',
       subtitle: 'header.products.galleryCards.compliance.subtitle',
-      to: buildLocalizedUrl(locale, myLayer.complianceUrl, PAGES.compliance.l),
+      to: buildLocalizedUrl(locale, urls.compliance, PAGES.compliance.l),
       image: '/header/compliance.webp',
       icon: AIconId,
     },
     {
       title: 'header.products.galleryCards.ved.title',
       subtitle: 'header.products.galleryCards.ved.subtitle',
-      to: buildLocalizedUrl(locale, myLayer.tnvedUrl),
+      to: buildLocalizedUrl(locale, urls.tnved),
       image: '/header/ved.webp',
       icon: AIconGlobe,
     },

package/components/navigation/header/HeaderLink.vue

@@ -6,22 +6,27 @@ import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
 
 import ContactMenu from '#adata-ui/components/navigation/header/ContactMenu.vue'
 import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
-const { myLayer }: any = useAppConfig()
+const { landing } = useUrls()
 const { t, locale } = useI18n()
 
 const navs: any = [
   {
     label: 'header.navs.products',
-    to: myLayer.landingUrl + PAGES.totalServices
+    to: landing + PAGES.totalServices
   },
   {
     label: 'header.navs.contacts',
-    to: myLayer.landingUrl + PAGES.contacts
+    to: landing + PAGES.contacts
   },
   {
     label: 'header.navs.tariffs',
-    to: myLayer.landingUrl + PAGES.tariffs
+    to: landing + PAGES.tariffs
+  },
+  {
+    label: 'header.navs.api',
+    to: landing + PAGES.api
   }
 ]
 
@@ -47,7 +52,9 @@ const currentMenuToShow = (index) => {
 }
 const toggleMenu = (index: number) => {
   if (index === 2) {
-    window.open(buildLocalizedUrl(locale, myLayer.landingUrl, PAGES.tariffs), '_blank')
+    window.open(buildLocalizedUrl(locale, landing, PAGES.tariffs), '_blank')
+  } else if (index === 3) {
+    window.open(buildLocalizedUrl(locale, landing, PAGES.api), '_blank')
   } else {
     currentMenu.value = currentMenuToShow(index)
     const prev = currentIndex.value
@@ -76,7 +83,7 @@ const closeMenu = (forceClose = false) => {
   }
 }
 const onMenuMouseEnter = (index: number) => {
-  if (index !== 2) {
+  if (![2, 3].includes(index)) {
     if (show.value === false) {
       delayTimer.value = setTimeout(() => {
         toggleMenu(index)
@@ -144,6 +151,7 @@ watch(
         :key="nav.label"
         class="group inline-block border-r border-[#2C3E501A] px-2 last-of-type:border-none dark:border-[#E3E5E81A]"
         @click="lockMenu"
+        role="listitem"
       >
         <div
           class="relative cursor-pointer font-bold uppercase text-gray-800 hover:text-gray-600 dark:text-gray-200 hover:dark:text-gray-600"
@@ -158,7 +166,7 @@ watch(
     <div
       v-show="show"
       ref="menu"
-      class="mt-5 fixed left-0 z-20 h-full w-full"
+      class="top-[104px] fixed left-0 z-20 h-full w-full"
     >
       <div class="h-full w-full">
         <transition :name="animation">
@@ -168,7 +176,7 @@ watch(
               v-show="show"
               :animation="forward ? 'next' : 'prev'"
               :index="currentIndex"
-              :url="buildLocalizedUrl(locale, myLayer.landingUrl, PAGES.contacts)"
+              :url="buildLocalizedUrl(locale, landing, PAGES.contacts)"
               @outer-click="closeMenu(true)"
               @mouse-over="closeMenu"
             />

package/components/navigation/header/NavList.vue

@@ -11,12 +11,17 @@ const props = defineProps<{
   id: string
   icon?: Component
   title: string
+  link: string
   badge?: boolean
   to: string
   navList: NavList[]
   currentModule: boolean
 }>()
 
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
 function isActive(itemPath: string) {
   if (!props.currentModule) return false
 
@@ -69,7 +74,7 @@ function isActive(itemPath: string) {
     class="flex flex-col gap-2"
     :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
   >
-    <div class="flex items-center gap-2 pl-[10px]">
+    <nuxt-link-locale class="flex items-center gap-2 pl-[10px] hover:text-blue-700 dark:hover:text-blue-500" :to="link">
       <p class="text-sm font-semibold">
         {{ title }}
       </p>
@@ -82,15 +87,15 @@ function isActive(itemPath: string) {
       >
         NEW
       </a-status-badge>
-    </div>
+    </nuxt-link-locale>
     <ul class="flex flex-col gap-2">
       <li
         v-for="item in navList"
         :key="item.title"
-        class="flex w-full items-center gap-2 rounded-md px-[10px] py-[6px] hover:bg-deepblue-900/5 dark:hover:bg-gray-200/5"
+        class="flex w-full items-center gap-2 rounded-md px-[10px] py-[6px] hover:bg-blue-100 dark:hover:bg-gray-200/10 text-gray-600 dark:text-gray-200 hover:text-blue-700 dark:hover:text-blue-500"
         :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
       >
-        <div class="bg-gradient-blue g-white rounded-lg p-1 dark:bg-gray-900">
+        <div class="rounded-lg p-1" :class="{ 'bg-gradient-blue-dark ': isDark, 'bg-gradient-blue-light': !isDark }">
           <component
             :is="item.icon"
             class="size-[18px] text-white dark:text-gray-900"
@@ -99,7 +104,8 @@ function isActive(itemPath: string) {
         <nuxt-link-locale
           v-if="item.to"
           :to="item.to"
-          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
+          itemprop="name"
+          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-inherit hover:text-inherit"
         >
           {{ item.title }}
         </nuxt-link-locale>
@@ -113,3 +119,13 @@ function isActive(itemPath: string) {
     </ul>
   </div>
 </template>
+
+<style scoped lang="scss">
+.bg-gradient-blue-dark {
+  background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
+}
+
+.bg-gradient-blue-light {
+  background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
+}
+</style>

package/components/navigation/header/ProductMenu.vue

@@ -1,33 +1,4 @@
 <script setup lang="ts">
-import NavCard from '#adata-ui/components/navigation/header/NavCard.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-import ListItem from '#adata-ui/components/navigation/header/ListItem.vue'
-import IconSearch from '#adata-ui/icons/search.vue'
-import IconUsers from '#adata-ui/icons/users.vue'
-import IconScales from '#adata-ui/icons/scales/scale.vue'
-import IconLink from '#adata-ui/icons/link-chain.vue'
-import IconArrowCircle from '#adata-ui/icons/arrow/arrow-circle-down.vue'
-import IconBlock from '#adata-ui/icons/block.vue'
-import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
-import IconWork from '#adata-ui/icons/work-bag.vue'
-import IconDocument from '#adata-ui/icons/hdocument.vue'
-import IconCheck from '#adata-ui/icons/hcheck.vue'
-import IconCalc from '#adata-ui/icons/calculator.vue'
-import IconGlobe from '#adata-ui/icons/globe.vue'
-import IconFile from '#adata-ui/icons/file/file.vue'
-import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
-import IconCar from '#adata-ui/icons/car.vue'
-import IconTruck from '#adata-ui/icons/truck.vue'
-import IconArrowGraph from '#adata-ui/icons/arrow/arrow-graph-up.vue'
-import IconMedal from '#adata-ui/icons/medal.vue'
-import IconHandshake from '#adata-ui/icons/handshake.vue'
-import IconClipboardText from '#adata-ui/icons/clipboard-text.vue'
-import IconUsersFocus from '#adata-ui/icons/users-focus.vue'
-import IconCompany from '#adata-ui/icons/company.vue'
-import IconProfile from '#adata-ui/icons/profile.vue'
-import Connections from '#adata-ui/icons/sviazi.vue'
-
-import { useCurrentModule } from '#adata-ui/composables/projectState'
 import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
 import NavList from '#adata-ui/components/navigation/header/NavList.vue'
 import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'
@@ -46,55 +17,9 @@ const props = withDefaults(
 )
 
 defineEmits(['outerClick', 'mouseOver'])
-const { myLayer }: any = useAppConfig()
-const colorMode = useColorMode()
-const activeTab = ref(useCurrentModule().value)
-const localePath = useLocalePath()
-
-const { t, locale } = useI18n()
 
 const pageUrl = useRequestURL()
-
-const allImages = computed(() => {
-  if (activeTab.value === 'pk' || activeTab.value === 'counterparty') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-pk-${locale.value}.webp`
-      : `/mode/light-pk-${locale.value}.webp`
-  }
-  if (activeTab.value === 'work') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-work-${locale.value}.webp`
-      : `/mode/light-work-${locale.value}.webp`
-  }
-  if (activeTab.value === 'tenders') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-tenders-${locale.value}.webp`
-      : `/mode/light-tenders-${locale.value}.webp`
-  }
-  if (activeTab.value === 'fines') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-fines-${locale.value}.webp`
-      : `/mode/light-fines-${locale.value}.webp`
-  }
-  if (activeTab.value === 'analytics') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-analytics-${locale.value}.webp`
-      : `/mode/light-analytics-${locale.value}.webp`
-  }
-  if (activeTab.value === 'fea') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-fea-${locale.value}.webp`
-      : `/mode/light-fea-${locale.value}.webp`
-  }
-  if (activeTab.value === 'compliance') {
-    return colorMode.value === 'dark'
-      ? `/mode/dark-complience-${locale.value}.webp`
-      : `/mode/light-complience-${locale.value}.webp`
-  }
-})
-
 const filteredItems = useHeaderNavigationLinks()
-const someHovered = ref(false)
 
 function isCurrentModule(currentModule: string) {
   if (currentModule === 'fines') return 'avto'
@@ -118,26 +43,30 @@ function isCurrentModule(currentModule: string) {
             <div class="flex gap-[10px] divide-x divide-gray-500/50">
               <div class="flex flex-col gap-5 w-[290px]">
                 <nav-list
-                  v-for="module in filteredItems.slice(0,2)"
+                  v-for="module in filteredItems.slice(0,3)"
                   :id="module.key"
                   :key="module.key"
                   :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                   :title="module.name"
+                  :link="module.link"
                   :nav-list="module.items"
                   :to="module.to"
                   :icon="module.icon"
+                  :badge="module.is_new"
                 />
               </div>
               <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
                 <nav-list
-                  v-for="module in filteredItems.slice(2,5)"
+                  v-for="module in filteredItems.slice(3,5)"
                   :id="module.key"
                   :key="module.key"
                   :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                   :title="module.name"
+                  :link="module.link"
                   :nav-list="module.items"
                   :to="module.to"
                   :icon="module.icon"
+                  :badge="module.is_new"
                 />
               </div>
               <div class="flex flex-col gap-5 w-[330px] pl-[10px]">
@@ -147,10 +76,11 @@ function isCurrentModule(currentModule: string) {
                   :key="module.key"
                   :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
                   :title="module.name"
+                  :link="module.link"
                   :nav-list="module.items"
                   :to="module.to"
                   :icon="module.icon"
-                  badge
+                  :badge="module.is_new"
                 />
               </div>
             </div>

package/components/navigation/header/ProfileMenu.vue

@@ -24,16 +24,21 @@ defineEmits(['logout'])
 
 const { t } = useI18n()
 
-const { myLayer }: any = useAppConfig()
 const { locale } = useI18n()
 
+// const { topUpSidePanel } = usePayment()
+
 const items = useHeaderMenuLinks()
 
+const { topUpSidePanel, rateId } = usePayment()
+
 const onReplenish = () => {
-  if (window) {
-    window.location.href =
-      buildLocalizedUrl(locale.value, myLayer.landingUrl, '/profile?popupBalance=1')
-  }
+  // if (myLayer.authMode === 'locale') {
+  //   topUpSidePanel.value = true
+  //   return
+  // }
+  rateId.value = ''
+  topUpSidePanel.value = true
 }
 </script>
 

package/components/navigation/header/TopHeader.vue

@@ -127,8 +127,8 @@ const closeMessage = () => {
       v-if="!isOpenNotification || !systemMessage"
       class="hidden min-h-10 bg-gray-50 dark:bg-gray-950 lg:block"
     >
-      <div class="a-container flex justify-between py-2 text-sm">
-        <div class="flex items-center">
+      <div class="a-container flex justify-between py-2 items-center text-sm">
+        <div class="flex items-center leading-[24px]">
           <div v-for="currency in currencies" :key="currency.currency" class="mr-4 flex gap-2">
             <div class="flex items-center">
               <component

package/components/navigation/mobile-navigation/AMobileNavigation.vue

@@ -7,6 +7,7 @@ import ProfileMenu from '#adata-ui/components/navigation/header/ProfileMenu.vue'
 import type { ProjectKeys } from '#adata-ui/components/navigation/header/types'
 import { useCurrentModule } from '#adata-ui/composables/projectState'
 import AModal from "#adata-ui/components/overlays/modal/AModal.vue";
+import { useUrls } from '#adata-ui/composables/useUrls'
 
 interface Props {
   replenish?: string
@@ -31,8 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emit = defineEmits(['logout'])
 useCurrentModule().value = props.module
-const appConfig = useAppConfig()
-const landingUrl = appConfig.myLayer.landingUrl
+const { landing } = useUrls()
 const activeModule = ref<string | null>(null)
 const isMain = ref(false)
 const isContacts = ref(false)
@@ -62,7 +62,7 @@ watch(activeModule, (e) => {
   } else if (e === 'profile') {
     isProfile.value = true
   } else if (e === 'tariff') {
-    navigateTo(`${landingUrl}/tariffs`, { external: true })
+    navigateTo(`${landing}/tariffs`, { external: true })
   }
   activeModule.value = ''
 })

package/components/navigation/pill-tabs/APillTabs.vue

@@ -2,8 +2,12 @@
   <div
     ref="tabs"
     class="scroll-container overflow-auto whitespace-nowrap"
-    :class="props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1'"
+    :class="[
+      props.wrapper === 'row' ? 'flex gap-1' : 'flex flex-col gap-1',
+      isSegmented ? 'rounded-[12px] bg-gray-50 p-1 shadow-[inset_2px_2px_4px_0_#00000014] dark:bg-gray-800' : ''
+    ]"
   >
+
     <button
       v-for="option in options"
       :key="option.key"
@@ -48,8 +52,9 @@ const emit = defineEmits(['selectOption', 'prevent'])
 
 interface Props {
   options: Tab[]
-  view?: 'transparent' | 'main' | 'gray' | 'blue' | 'mobile'
-  size?: 'lg' | 'sm' | 'xs'
+  // TODO: переименовать segmented
+  view?: 'transparent' | 'main' | 'gray' | 'blue' | 'mobile' | 'segmented'
+  size?: 'lg' | 'md' | 'sm' | 'xs' | 'ss'
   badgeSize?: 'sm' | 'md' | 'lg'
   align?: 'left' | 'center'
   block?: boolean
@@ -60,7 +65,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   view: 'main',
-  size: 'sm',
+  size: 'md',
   align: 'center',
   badgeSize: 'lg',
   block: false,
@@ -71,6 +76,10 @@ const tabs = ref<HTMLDivElement | null>(null)
 const activeTab = defineModel<any>({ default: 1 })
 const { t } = useI18n()
 
+
+// todo: вынести в пропc
+const isSegmented = computed(() => props.view === 'segmented')
+
 const viewTypeValues: ViewType = {
   main: {
     default:
@@ -95,6 +104,10 @@ const viewTypeValues: ViewType = {
     default:
       'bg-white dark:text-gray-200 font-semibold dark:bg-gray-900  dark:hover:bg-gray-500 hover:bg-deepblue-100 ',
     selected: 'text-white dark:text-gray-900 font-semibold dark:bg-white  bg-deepblue-900'
+  },
+  segmented: {
+    default: 'text-deepblue-900 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 dark:text-gray-200',
+    selected: 'bg-white text-deepblue-900 font-semibold shadow dark:bg-gray-900 dark:text-gray-200  shadow-[2px_2px_4px_0_#00000014]'
   }
 }
 
@@ -114,6 +127,7 @@ const selectedClasses = () => [
 const sizeOptions = {
   lg: 'px-4 py-2.5',
   sm: 'px-4 py-[7.5px]',
+  md: 'px-4 py-2',
   ss: 'px-3 py-1.5',
   xs: 'px-3 py-[4px]'
 }

package/components/navigation/pill-tabs/types.ts

@@ -9,6 +9,7 @@ export type ViewType = {
   gray: StateType;
   blue: StateType;
   mobile: StateType;
+  segmented: StateType;
 };