@dbosoft/nextjs-uicore 1.0.3 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @dbosoft/nextjs-uicore
 
+## 1.2.0
+
+### Minor Changes
+
+- 676c725: Server side download pages
+
+### Patch Changes
+
+- Updated dependencies [676c725]
+  - @dbosoft/react-uicore@1.1.0
+
+## 1.1.0
+
+### Minor Changes
+
+- 7a843e1: darkmode support for subnav
+
 ## 1.0.3
 
 ### Patch Changes

package/package.json

@@ -2,14 +2,16 @@
   "name": "@dbosoft/nextjs-uicore",
   "description": "Core UI components for Next.js",
   "author": "dbosoft",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
     ".": "./src",
     "./head": "./src/head/index.tsx",
-    "./tabs": "./src/tabs/index.tsx",
-    "./subnav": "./src/subnav/index.tsx"
+    "./tabs": "./src/tabs/index.ts",
+    "./tabs/server": "./src/tabs/server.ts",
+    "./subnav": "./src/subnav/index.tsx",
+    "./themeselector": "./src/themeselector/index.tsx"
   },
   "devDependencies": {
     "@types/react": "^18.2.46",
@@ -18,20 +20,22 @@
     "next": "^14.0.4",
     "react": "^18.2.0",
     "typescript": "^5.3.3",
-    "@dbosoft/web-types": "1.0.0",
     "@dbosoft/eslint-config": "1.0.0",
+    "@dbosoft/web-types": "1.0.0",
     "@dbosoft/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.3",
+    "@headlessui/react": "^2.2.1",
     "@heroicons/react": "^2.1.3",
     "classnames": "^2.3.1",
+    "clsx": "^2.1.0",
     "isomorphic-unfetch": "^4.0.2",
+    "next-themes": "^0.4.3",
     "unfetch": "^4.2.0",
-    "@dbosoft/react-uicore": "1.0.0"
+    "@dbosoft/react-uicore": "1.1.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

package/src/subnav/index.tsx

@@ -1,6 +1,5 @@
-import { Disclosure } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
 import type { LinkType, Variant } from '@dbosoft/react-uicore/linkbutton'
 import MenuItemsOverflow from './partials/MenuItemsOverflow'
 import MenuItemsDefault from './partials/MenuItemsDefault'
@@ -8,6 +7,8 @@ import CtaLinks from './partials/CtaLinks'
 import useStuckRef from './helpers/useStuckRef'
 import TitleLink from './partials/TitleLink'
 import style from './style.module.scss'
+import clsx from 'clsx'
+import { ThemeSelector } from '../themeselector'
 
 export type MenuItem = 'divider' | ILinkMenuItem;
 
@@ -41,7 +42,7 @@ interface ISubNavProps {
   titleLink?: ITitleLink,
   titleContent?: JSX.Element,
   ctaLinks: ICtaItem[],
-  hideGithubStars: boolean,
+  hideGithubStars: boolean
   menuItems: MenuItem[],
   menuItemsAlign: 'left' | 'right',
   className?: string
@@ -60,7 +61,7 @@ function Subnav({
   const { isStuck, stuckRef } = useStuckRef([])
 
   return (
-    <div className={classNames(style.root, `bg-white`, className, {
+    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
       [style.isSticky]: isStuck,
     })} ref={stuckRef}>
       <Disclosure as="nav" >
@@ -68,7 +69,7 @@ function Subnav({
           <>
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
               <div className="flex justify-between h-16">
-                <div className={classNames(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
+                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
                 
                   <div className="flex-shrink-0 flex items-center ">
                     {titleLink &&<TitleLink
@@ -88,46 +89,31 @@ function Subnav({
                     />
                   </div>
                 </div>
+
                 <div className="-mr-2 flex items-center sm:hidden ">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
+                  <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
                     ) : (
                       <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
                     )}
-                  </Disclosure.Button>
+                  </DisclosureButton>
                 </div>
               </div>
+
             </div>
 
-            <Disclosure.Panel className="sm:hidden">
+            <DisclosurePanel className="sm:hidden">
               <div className="pt-2 pb-3 space-y-1">
                 <MenuItemsOverflow
                   ctaLinks={ctaLinks}
                   hideGithubStars={hideGithubStars}
                   menuItems={menuItems}
-                />
-                {/*              {navigation.map((item) => (
-                <Disclosure.Button
-                  key={item.name}
-                  as="a"
-                  href={item.href}
-                  className={classNames(
-                    item.current
-                      ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
-                      : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
-                    'block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
-                  )}
-                  aria-current={item.current ? 'page' : undefined}
-                >
-                  {item.name}
-                </Disclosure.Button>
-              ))}
-   */}          </div>
-
-            </Disclosure.Panel>
+                />          </div>
+
+            </DisclosurePanel>
           </>
         )}
       </Disclosure>

package/src/subnav/partials/CtaLinks/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import clsx from 'clsx'
 import LinkButton from '@dbosoft/react-uicore/linkbutton'
 import Link from 'next/link'
 import type { ICtaItem } from '../..'
@@ -11,7 +11,7 @@ function CtaLinks(props: {
 }) {
   const { links, hideGithubStars, isInDropdown } = props
   return (
-    <div className={classNames("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
+    <div className={clsx("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
       {links.map((link, stableIdx) => {
 
         const textKey = link.text.toLowerCase()

package/src/subnav/partials/MenuItemsDefault/index.tsx

@@ -13,17 +13,6 @@ function MenuItemsDefault(props: {
   return (
     <ul
       className="inline-flex items-center">
-      {/*      <a
-        key={item.name}
-        href={item.href}
-        className={classNames(
-          item.current
-            ? 'border-indigo-500 text-gray-900'
-            : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-          'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium'
-        )}
-        aria-current={item.current ? 'page' : undefined}
-        ></a> */}
       {menuItems.map((menuItem, stableIdx) => {
         if (menuItem === 'divider') {
           return <VerticalDivider key={stableIdx} />
@@ -42,7 +31,7 @@ function MenuItemsDefault(props: {
 function VerticalDivider() {
   return (
     <li>
-      <span className="bg-gray-400 w-0.5 h-6 mx-1 block" />
+      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
     </li>
   )
 }

package/src/subnav/partials/MenuItemsOverflow/index.tsx

@@ -5,7 +5,7 @@ import CtaLinks from '../CtaLinks'
 import type { ICtaItem, MenuItem } from '../..'
 import s from './style.module.scss'
 import Link from 'next/link';
-
+import clsx from 'clsx'
 
 interface MenuItemsOverflowProps {
   menuItems: MenuItem[],
@@ -39,9 +39,10 @@ export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars
 }
 
 function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
+
   return (
     <li>
-      <LinkWrap Link={Link} className={s.submenuItem} href={url} title={text}>
+      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
         {text}
       </LinkWrap>
     </li>

package/src/subnav/partials/nav-item-text/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import clsx from 'clsx'
 import React from 'react'
 
 /**
@@ -19,7 +19,7 @@ function NavItemText({
 }): React.ReactElement {
   return (
     <span
-      className={classNames("text-black text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
+      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
     >
       {text}
     </span>

package/src/tabs/Tabs.tsx

@@ -0,0 +1,50 @@
+import { TabList, Tab, TabPanels, TabPanel, TabGroup } from "@headlessui/react"
+import { FC, Suspense } from "react"
+
+import TabsClient, { TabConfig, TabLink } from "./TabsClient"
+
+
+export const TabsContent: FC<{
+  tabs: TabConfig[],
+  tabNames: string[]
+}> = ({
+  tabs,
+  tabNames
+}) => {
+
+    return <>
+      <TabList className={` pt-2 flex justify-center`}>
+        {tabs.map((tab, index) => <Suspense key={tab.name}><Tab as={TabLink} className={tab.className}  index={index} tabs={tabNames}>{tab.displayName}</Tab></Suspense>)}
+      </TabList>
+      <TabPanels className={`mt-4  pt-0 border-t-2 border-brand-light dark:border-brand-dark`}>
+        {tabs.map((tab, index) => <TabPanel className={`py-4`} key={index}>{tab.content}</TabPanel>)}
+      </TabPanels>
+    </>
+  }
+
+
+const Tabs: FC<{
+  tabs: TabConfig[],
+  currentTab: string | undefined
+}> = ({
+  tabs,
+  currentTab
+}) => {
+    let selectedTab = currentTab ? tabs.findIndex(tab => tab.name === currentTab) : 0;
+    if (selectedTab == -1)
+      selectedTab = 0;
+
+    const tabNames = tabs.map(tab => tab.name);
+
+
+    return <div className="pb-8"><Suspense fallback={<TabGroup selectedIndex={selectedTab}>
+      <TabsContent tabs={tabs} tabNames={tabNames} /></TabGroup>}>
+      <TabsClient initialTab={selectedTab} tabs={tabNames}>
+        <TabsContent tabs={tabs} tabNames={tabNames} />
+      </TabsClient>
+    </Suspense>
+    </div>
+
+  }
+
+export default Tabs;

package/src/tabs/TabsClient.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { FC, ReactNode, forwardRef, useState } from "react";
+import { TabGroup } from "@headlessui/react"
+import Link from "next/link";
+import clsx from "clsx";
+
+export type TabConfig = {
+  name: string,
+  displayName: string
+  className?: string
+  content: ReactNode
+}
+
+export const createNavUrl = (index: number, tabs: string[], pathname: string, searchParams: URLSearchParams) => {
+  const lastSegment = pathname.split(`/`).pop();
+  let newPath = pathname;
+
+  if (lastSegment && tabs.includes(lastSegment)) {
+    newPath = pathname.substring(0, pathname.lastIndexOf(`/`));
+  }
+
+  const newTab = index > 0 ? tabs[index] : ``;
+  newPath = newPath + `/` + newTab;
+
+  const query = searchParams.toString();
+
+  if (query)
+    return (newPath + `?` + query);
+  else
+    return newPath;
+}
+
+export const TabLink = forwardRef<HTMLAnchorElement, React.PropsWithChildren<{
+  index: number, tabs: string[], className: string
+}>>((props, ref) => {
+
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  return <Link prefetch={false} role="tab" {...props} className={clsx(`data-[selected]:border-secondary data-[selected]:text-link-light dark:data-[selected]:text-sky-300`,
+    `border-transparent text-content-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
+    `whitespace-nowrap border-b-2 mx-3 px-2 py-2 text-base font-semibold`)} ref={ref} href={createNavUrl(props.index, props.tabs, pathname, searchParams)}
+  >
+    {props.children}
+  </Link >
+});
+
+TabLink.displayName = `TabLink`;
+
+const TabsClient: FC<{
+  children: ReactNode,
+  initialTab: number,
+  tabs: string[]
+}> = ({
+  children,
+  tabs,
+  initialTab
+}) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [selectedTab, setSelectedTab] = useState(initialTab);
+
+    return <TabGroup className="text-content-primary" manual selectedIndex={selectedTab}
+      defaultIndex={initialTab} onChange={(index) => {
+        router.push(createNavUrl(index, tabs, pathname, searchParams));
+        setSelectedTab(index);
+      }}>
+      {children}
+    </TabGroup>
+  }
+
+export default TabsClient

package/src/tabs/index.ts

@@ -0,0 +1,3 @@
+// Client-safe exports — can be imported from 'use client' components
+export type { TabConfig } from './TabsClient'
+export { default as TabsClient, createNavUrl, TabLink } from './TabsClient'

package/src/tabs/server.ts

@@ -0,0 +1,2 @@
+// Server-only exports — must NOT be imported from 'use client' components
+export { default as Tabs, TabsContent } from './Tabs'

package/src/themeselector/index.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/react'
+import clsx from 'clsx'
+
+const themes = [
+  { name: 'Light', value: 'light', icon: LightIcon },
+  { name: 'Dark', value: 'dark', icon: DarkIcon },
+  { name: 'System', value: 'system', icon: SystemIcon },
+]
+
+function LightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
+      />
+    </svg>
+  )
+}
+
+function DarkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
+      />
+    </svg>
+  )
+}
+
+function SystemIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
+      />
+    </svg>
+  )
+}
+
+export function ThemeSelector(
+  props: React.ComponentPropsWithoutRef<typeof Listbox<'div'>>,
+) {
+  let { theme, setTheme } = useTheme()
+  let [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="h-6 w-6" />
+  }
+
+  return (
+    <Listbox as="div" value={theme} onChange={setTheme} {...props}>
+      <ListboxLabel className="sr-only">Theme</ListboxLabel>
+      <ListboxButton
+        className="flex h-9 w-12 mt-3 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+        aria-label="Theme"
+      >
+        <LightIcon
+          className={clsx(
+            'h-4 w-4 dark:hidden',
+            theme === 'system' ? 'fill-slate-400' : 'fill-sky-400',
+          )}
+        />
+        <DarkIcon
+          className={clsx(
+            'hidden h-4 w-4 dark:block',
+            theme === 'system' ? 'fill-slate-400' : 'fill-sky-400',
+          )}
+        />
+      </ListboxButton>
+      <ListboxOptions className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
+        {themes.map((theme) => (
+          <ListboxOption
+            key={theme.value}
+            value={theme.value}
+            className={({ focus, selected }) =>
+              clsx(
+                'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
+                {
+                  'text-sky-500': selected,
+                  'text-slate-900 dark:text-white': focus && !selected,
+                  'text-slate-700 dark:text-slate-400': !focus && !selected,
+                  'bg-slate-100 dark:bg-slate-900/40': focus,
+                },
+              )
+            }
+          >
+            {({ selected }) => (
+              <>
+                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
+                  <theme.icon
+                    className={clsx(
+                      'h-4 w-4',
+                      selected
+                        ? 'fill-sky-400 dark:fill-sky-400'
+                        : 'fill-slate-400',
+                    )}
+                  />
+                </div>
+                <div className="ml-3">{theme.name}</div>
+              </>
+            )}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    </Listbox>
+  )
+}

package/src/tabs/hooks/use-scroll-left.ts

@@ -1,27 +0,0 @@
-import { useState, useEffect, useRef, MutableRefObject } from 'react'
-
-export default function useScrollLeft(): [
-  scrollRef: MutableRefObject<$TSFixMe>,
-  scrollLeft: number
-] {
-  const scrollRef = useRef(null)
-  const [scrollLeft, setScrollLeft] = useState()
-
-  useEffect(() => {
-    const scrollElem = scrollRef.current as $TSFixMe;
-    // Handler to call when scrollLeft may be affected
-    function handleScroll() {
-      if (!scrollRef.current) return null
-      // Set scroll data to state
-      setScrollLeft((scrollRef.current as $TSFixMe).scrollLeft)
-    }
-    // Add event listener
-    scrollElem.addEventListener('scroll', handleScroll)
-    // Call handler right away so state gets updated with initial scroll position
-    handleScroll()
-    // Remove event listener on cleanup
-    return () => scrollElem.removeEventListener('scroll', handleScroll)
-  }, [scrollRef])
-
-  return [scrollRef, 0]
-}

package/src/tabs/hooks/use-window-size.js

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react'
-
-//  https://usehooks.com/useWindowSize/
-export default function useWindowSize() {
-  // Initialize state with undefined width/height so server and client renders match
-  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const [windowSize, setWindowSize] = useState({
-    width: undefined,
-    height: undefined,
-  })
-
-  useEffect(() => {
-    // Handler to call on window resize
-    function handleResize() {
-      // Set window width/height to state
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
-    }
-
-    // Add event listener
-    window.addEventListener('resize', handleResize)
-
-    // Call handler right away so state gets updated with initial window size
-    handleResize()
-
-    // Remove event listener on cleanup
-    return () => window.removeEventListener('resize', handleResize)
-  }, []) // Empty array ensures that effect is only run on mount
-
-  return windowSize
-}

package/src/tabs/icons/chevron-right.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18l6-6-6-6" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/tabs/icons/tooltip.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" stroke="var(--gray-4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="var(--gray-4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.387a.379.379 0 100-.758.379.379 0 000 .758z" fill="var(--gray-4)" stroke="var(--gray-4)" stroke-width="1.5" stroke-linejoin="round"/></svg>

package/src/tabs/index.tsx

@@ -1,102 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { TabTriggerType } from './partials/tab-trigger'
-import TabTriggers from './partials/tab-triggers'
-import TabProvider, { useTabGroups } from './provider'
-import s from './style.module.css'
-
-interface TabChildProps {
-  /** Renders the tab contents. */
-  children: React.ReactElement
-  /** Plain text used for the tab heading. */
-  heading: string
-  /** Accepts a string such that, when the tab is active, other Tab elements outside the instance with a matching `group` value will automatically be shown. Note that `TabProvider` is required in order for this feature to function.v */
-  group?: string
-  /** Plain text displayed in a tooltip beside the tab heading. */
-  tooltip?: string
-}
-
-function Tab({ children }: TabChildProps): React.ReactElement {
-  return <>{children}</>
-}
-
-interface TabsProps {
-  /** Children to be displayed as tabs. Each child accepts the props `{ children: ReactElement, heading: string, tooltip?: string, group?: string }` */
-  children: Array<React.ReactElement<TabChildProps>>
-  /** If set to true, the tabs are centered in their container. Default is left-aligned. */
-  centered?: boolean
-  /** Optional className to add to the root element. */
-  className?: string
-  /** Set the default tab by its index. If not set, or if out of range, will default to the first tab, at index 0. */
-  defaultTabIdx?: number
-  /** If set to true, the bottom border underneath the tabs will fill the available width. Default border fills the constrained `.g-grid-container`. */
-  fullWidthBorder?: boolean
-  /** Optional callback which is executed when a new tab is selected. */
-  onChange?: (targetTabIdx: number, targetTabGroup?: string) => void
-}
-
-function Tabs({
-  children,
-  className,
-  defaultTabIdx = 0,
-  centered = false,
-  fullWidthBorder = false,
-  onChange,
-}: TabsProps): React.ReactElement {
-  // Ensures a single child object converts to an array
-  children = Array.prototype.concat(children)
-
-  const isDefaultOutOfBounds =
-    defaultTabIdx >= children.length || defaultTabIdx < 0
-
-  const [activeTabIdx, setActiveTabIdx] = useState(
-    // if specified default is out of bounds (ie, it's determined at runtime),
-    // fallback to 0 to avoid throwing an error
-    isDefaultOutOfBounds ? 0 : defaultTabIdx
-  )
-  const groupCtx = useTabGroups()
-
-  function setActiveTab(targetIdx : number, groupId?:string) {
-    setActiveTabIdx(targetIdx)
-    if (onChange) onChange(targetIdx, groupId)
-    if (groupCtx) groupCtx.setActiveTabGroup(groupId)
-  }
-
-  useEffect(() => {
-    const hasGroups = children.filter((tab) => tab.props.group).length > 0
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      hasGroups &&
-      groupCtx === undefined
-    ) {
-      console.warn(
-        '@dbosoft/react-tabs: The `TabProvider` cannot be accessed. Make sure it wraps the `Tabs` components so Tab Groups can work properly.'
-      )
-    }
-  }, [children, groupCtx])
-
-  if (!children) {
-    process.env.NODE_ENV !== 'production' &&
-      console.warn(
-        '@dbosoft/react-tabs: There are no `Tab` children for the `Tabs` component to render.'
-      )
-  }
-
-  return (
-    <section className={className}>
-      <TabTriggers
-        tabs={children.map((tab, index) => {
-          const { heading, group, tooltip } = tab.props
-          return { index, heading, group, tooltip } as TabTriggerType
-        })}
-        centered={centered}
-        fullWidthBorder={fullWidthBorder}
-        activeTabIdx={activeTabIdx}
-        setActiveTab={setActiveTab}
-      />
-      <div className={s.content}>{children[activeTabIdx].props.children}</div>
-    </section>
-  )
-}
-
-export default Tabs
-export { TabProvider, useTabGroups, Tab }