@dbosoft/nextjs-uicore 1.5.1 → 1.6.0

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

@@ -1,46 +1,46 @@
-import clsx from 'clsx'
-import LinkButton from '@dbosoft/react-uicore/linkbutton'
-import Link from 'next/link'
-import type { ICtaItem } from '../..'
-import GithubStarsLink from './github-stars-link'
-
-function CtaLinks(props: {
-  links: ICtaItem[],
-  hideGithubStars: boolean,
-  isInDropdown: boolean
-}) {
-  const { links, hideGithubStars, isInDropdown } = props
-  return (
-    <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()
-        const isGithub = textKey === 'github'
-
-         if (isGithub)
-          return (
-            <GithubStarsLink
-               
-              hideGithubStars={hideGithubStars}
-              key={stableIdx}
-              url={link.url}
-            />
-          ) 
-        return (
-          <LinkButton
-             
-            Link={Link}
-            className={link.className}
-            key={stableIdx}
-            linktype={link.linktype}
-            text={link.text}
-            url={link.url}
-            variant={link.variant}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export default CtaLinks
+import clsx from 'clsx'
+import LinkButton from '@dbosoft/react-uicore/linkbutton'
+import Link from 'next/link'
+import type { ICtaItem } from '../..'
+import GithubStarsLink from './github-stars-link'
+
+function CtaLinks(props: {
+  links: ICtaItem[],
+  hideGithubStars: boolean,
+  isInDropdown: boolean
+}) {
+  const { links, hideGithubStars, isInDropdown } = props
+  return (
+    <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()
+        const isGithub = textKey === 'github'
+
+         if (isGithub)
+          return (
+            <GithubStarsLink
+               
+              hideGithubStars={hideGithubStars}
+              key={stableIdx}
+              url={link.url}
+            />
+          ) 
+        return (
+          <LinkButton
+             
+            Link={Link}
+            className={link.className}
+            key={stableIdx}
+            linktype={link.linktype}
+            text={link.text}
+            url={link.url}
+            variant={link.variant}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default CtaLinks

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

@@ -1,52 +1,52 @@
-import type { ReactElement } from 'react';
-import React from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-import NavItemText from '../nav-item-text'
-import type { MenuItem } from '../..'
-import Link from 'next/link';
-
-function MenuItemsDefault(props: {
-  menuItems: MenuItem[]
-}) {
-  const { menuItems } = props
-
-  return (
-    <ul
-      className="inline-flex items-center">
-      {menuItems.map((menuItem, stableIdx) => {
-        if (menuItem === 'divider') {
-          return <VerticalDivider key={stableIdx} />
-        }
-        const { text, url } = menuItem
-        return <NavLink
-          isActive={menuItem.active || false}
-          key={stableIdx}
-          text={text}
-          url={url}
-        />
-      })}
-    </ul>
-  )
-}
-function VerticalDivider() {
-  return (
-    <li>
-      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
-    </li>
-  )
-}
-
-
-function NavLink(props: { text: string; url: string; isActive: boolean }) {
-  const { text, url, isActive } = props
-  return (
-    <li>
-      <LinkWrap Link={Link} className="px-2" href={url}>
-        <NavItemText isActive={isActive} text={text} />
-      </LinkWrap>
-    </li>
-  )
-}
-
-
-export default MenuItemsDefault
+import type { ReactElement } from 'react';
+import React from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import NavItemText from '../nav-item-text'
+import type { MenuItem } from '../..'
+import Link from 'next/link';
+
+function MenuItemsDefault(props: {
+  menuItems: MenuItem[]
+}) {
+  const { menuItems } = props
+
+  return (
+    <ul
+      className="inline-flex items-center">
+      {menuItems.map((menuItem, stableIdx) => {
+        if (menuItem === 'divider') {
+          return <VerticalDivider key={stableIdx} />
+        }
+        const { text, url } = menuItem
+        return <NavLink
+          isActive={menuItem.active || false}
+          key={stableIdx}
+          text={text}
+          url={url}
+        />
+      })}
+    </ul>
+  )
+}
+function VerticalDivider() {
+  return (
+    <li>
+      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
+    </li>
+  )
+}
+
+
+function NavLink(props: { text: string; url: string; isActive: boolean }) {
+  const { text, url, isActive } = props
+  return (
+    <li>
+      <LinkWrap Link={Link} className="px-2" href={url}>
+        <NavItemText isActive={isActive} text={text} />
+      </LinkWrap>
+    </li>
+  )
+}
+
+
+export default MenuItemsDefault

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

@@ -1,51 +1,51 @@
-import type { ReactElement } from 'react';
-import React from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-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[],
-  ctaLinks: ICtaItem[],
-  hideGithubStars: boolean,
-}
-
-
-export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars }: MenuItemsOverflowProps) {
-  return (<><ul className={s.ulElem}>
-    {menuItems.map((menuItem, stableIdx) => {
-      if (menuItem === 'divider') return null
-
-      const { text, url } = menuItem
-      return (
-        <SubmenuItem
-          active={menuItem.active || false}
-          key={stableIdx}
-          text={text}
-          url={url}
-        />
-      )
-    })}
-  </ul>
-    <CtaLinks
-      hideGithubStars={hideGithubStars}
-      isInDropdown
-      links={ctaLinks}
-    /></>)
-
-}
-
-function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
-
-  return (
-    <li>
-      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
-        {text}
-      </LinkWrap>
-    </li>
-  )
-}
-
+import type { ReactElement } from 'react';
+import React from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+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[],
+  ctaLinks: ICtaItem[],
+  hideGithubStars: boolean,
+}
+
+
+export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars }: MenuItemsOverflowProps) {
+  return (<><ul className={s.ulElem}>
+    {menuItems.map((menuItem, stableIdx) => {
+      if (menuItem === 'divider') return null
+
+      const { text, url } = menuItem
+      return (
+        <SubmenuItem
+          active={menuItem.active || false}
+          key={stableIdx}
+          text={text}
+          url={url}
+        />
+      )
+    })}
+  </ul>
+    <CtaLinks
+      hideGithubStars={hideGithubStars}
+      isInDropdown
+      links={ctaLinks}
+    /></>)
+
+}
+
+function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
+
+  return (
+    <li>
+      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
+        {text}
+      </LinkWrap>
+    </li>
+  )
+}
+

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

@@ -13,7 +13,7 @@ const TitleLink: FC<{
     return (
       <LinkWrap
         Link={Link}
-        className="font-bold text-gray-900 tracking-widest text-lg inline"
+        className="font-semibold text-gray-900 tracking-widest text-lg inline"
         href={url}
         title={text}
       >{text}

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

@@ -1,29 +1,29 @@
-import clsx from 'clsx'
-import React from 'react'
-
-/**
- *
- * A span of styled text with
- * an active state that adds a thick
- * bottom border.
- *
- */
-function NavItemText({
-  isActive,
-  text,
-}: {
-  /** If true, item will be rendered with a thick bottom border below the text. */
-  isActive: boolean
-  /** Plain text to render within the styled <span /> */
-  text: string
-}): React.ReactElement {
-  return (
-    <span
-      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
-    >
-      {text}
-    </span>
-  )
-}
-
-export default NavItemText
+import clsx from 'clsx'
+import React from 'react'
+
+/**
+ *
+ * A span of styled text with
+ * an active state that adds a thick
+ * bottom border.
+ *
+ */
+function NavItemText({
+  isActive,
+  text,
+}: {
+  /** If true, item will be rendered with a thick bottom border below the text. */
+  isActive: boolean
+  /** Plain text to render within the styled <span /> */
+  text: string
+}): React.ReactElement {
+  return (
+    <span
+      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
+    >
+      {text}
+    </span>
+  )
+}
+
+export default NavItemText

package/src/tabs/Tabs.tsx

@@ -1,50 +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;
+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

@@ -1,75 +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
+"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

@@ -1,3 +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'
+// 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

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

package/src/themeselector/index.tsx

@@ -83,7 +83,7 @@ export function ThemeSelector({
     <Listbox as="div" value={theme} onChange={setTheme} {...props}>
       <ListboxLabel className="sr-only">{labels.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"
+        className="flex h-9 w-12 mt-3 items-center justify-center rounded-container-sm shadow-popover shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
         aria-label={labels.themeAriaLabel}
       >
         <LightIcon
@@ -99,7 +99,7 @@ export function ThemeSelector({
           )}
         />
       </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">
+      <ListboxOptions className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-container bg-white p-3 text-sm font-medium shadow-popover shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
         {themes.map((theme) => (
           <ListboxOption
             key={theme.value}
@@ -118,7 +118,7 @@ export function ThemeSelector({
           >
             {({ 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">
+                <div className="rounded-control bg-white p-1 shadow-control 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',