@dbosoft/nextjs-uicore 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dbosoft/nextjs-uicore
 
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies [e1e8cbf]
+  - @dbosoft/react-uicore@1.4.2
+
+## 1.6.1
+
+### Patch Changes
+
+- Updated dependencies [909ea3a]
+  - @dbosoft/react-uicore@1.4.1
+
 ## 1.6.0
 
 ### Minor Changes

package/eslint.config.mjs

@@ -1,3 +1,3 @@
-import react from '@dbosoft/eslint-config/react'
-
-export default [...react]
+import react from '@dbosoft/eslint-config/react'
+
+export default [...react]

package/package.json

@@ -3,7 +3,7 @@
   "description": "DEPRECATED: Use @dbosoft/react-uicore/tabs for pure React tabs and @dbosoft/nextjs-site-core/ui/tabs for Next.js integration. All other components (head, subnav, themeselector) are replaced by @dbosoft/nextjs-site-core.",
   "deprecated": true,
   "author": "dbosoft",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
@@ -30,12 +30,16 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dbosoft/react-components.git"
+  },
   "dependencies": {
     "@headlessui/react": ">=2.2.0",
     "@heroicons/react": ">=2.1.0",
     "clsx": ">=2.1.0",
     "next-themes": ">=0.4.3",
-    "@dbosoft/react-uicore": "1.4.0"
+    "@dbosoft/react-uicore": "1.4.2"
   },
   "scripts": {
     "check-types": "tsc --noEmit",

package/src/subnav/helpers/useStuckRef.ts

@@ -1,50 +1,50 @@
-"use client"
-
-import type { DependencyList} from 'react';
-import { useCallback, useState } from 'react'
-
-const IntersectionObserver =
-  (typeof window !== 'undefined' && window.IntersectionObserver) || null
-const intersectionOpts = { threshold: [1] }
-
-/*
-
-Stuck-ness is determined by whether a sticky target element has intersected the
-top boundary of its viewport.
-
-Stuck-ness is checked on intersection observation.
-
-IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
-
-- Chrome 51+
-- Edge 15+
-- Firefox 55+
-- Safari 12.1+
-
-Internet Explorer 11 gracefully skips over this functionality, as it does not
-support `IntersectionObserver` or CSS `position: sticky`.
-
-*/
-
-export default function useStuckRef(deps: DependencyList) {
-  const [isStuck, setStuck] = useState(false)
-
-  const stuckRef = useCallback((target: Element | null) => {
-    if (target && IntersectionObserver) {
-      const intersectionObserver = new IntersectionObserver(([entry]) => {
-        const nowIsStuck = entry.intersectionRatio < 1
-        setStuck(nowIsStuck);
-
-      }, intersectionOpts)
-
-      intersectionObserver.observe(target)
-
-      return intersectionObserver.disconnect.bind(intersectionObserver)
-    }
-    return () => { };
-  }, [...deps]);
-
-
-
-  return { isStuck, stuckRef }
-}
+"use client"
+
+import type { DependencyList} from 'react';
+import { useCallback, useState } from 'react'
+
+const IntersectionObserver =
+  (typeof window !== 'undefined' && window.IntersectionObserver) || null
+const intersectionOpts = { threshold: [1] }
+
+/*
+
+Stuck-ness is determined by whether a sticky target element has intersected the
+top boundary of its viewport.
+
+Stuck-ness is checked on intersection observation.
+
+IntersectionObserver Compatibility (https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Browser_compatibility):
+
+- Chrome 51+
+- Edge 15+
+- Firefox 55+
+- Safari 12.1+
+
+Internet Explorer 11 gracefully skips over this functionality, as it does not
+support `IntersectionObserver` or CSS `position: sticky`.
+
+*/
+
+export default function useStuckRef(deps: DependencyList) {
+  const [isStuck, setStuck] = useState(false)
+
+  const stuckRef = useCallback((target: Element | null) => {
+    if (target && IntersectionObserver) {
+      const intersectionObserver = new IntersectionObserver(([entry]) => {
+        const nowIsStuck = entry.intersectionRatio < 1
+        setStuck(nowIsStuck);
+
+      }, intersectionOpts)
+
+      intersectionObserver.observe(target)
+
+      return intersectionObserver.disconnect.bind(intersectionObserver)
+    }
+    return () => { };
+  }, [...deps]);
+
+
+
+  return { isStuck, stuckRef }
+}

package/src/subnav/index.tsx

@@ -1,134 +1,134 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
-import type { LinkType, Variant } from '@dbosoft/react-uicore/linkbutton'
-import MenuItemsOverflow from './partials/MenuItemsOverflow'
-import MenuItemsDefault from './partials/MenuItemsDefault'
-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'
-
-export type MenuItem = 'divider' | ILinkMenuItem;
-
-export interface IDropDownMenuItem {
-  text: string,
-  submenu: ILinkMenuItem[]
-}
-
-export interface ILinkMenuItem {
-  text: string,
-  url: string,
-  type: 'inbound' | 'outbound' | 'anchor'
-  active?: boolean
-}
-
-export interface ITitleLink {
-  url: string,
-  text?: string,
-}
-
-
-export interface ICtaItem {
-  text: string,
-  url: string,
-  variant?: Variant
-  linktype?: LinkType
-  className?: string,
-}
-
-export interface SubNavLabels {
-  openMainMenu: string
-}
-
-const defaultSubNavLabels: SubNavLabels = {
-  openMainMenu: 'Open main menu',
-}
-
-interface ISubNavProps {
-  titleLink?: ITitleLink,
-  titleContent?: React.JSX.Element,
-  ctaLinks: ICtaItem[],
-  hideGithubStars: boolean
-  menuItems: MenuItem[],
-  menuItemsAlign: 'left' | 'right',
-  className?: string,
-  labels?: Partial<SubNavLabels>
-}
-
-function Subnav({
-  className,
-  titleLink,
-  ctaLinks = [],
-  hideGithubStars,
-  menuItems,
-  menuItemsAlign = `right`,
-  titleContent,
-  labels: labelsProp
-}: ISubNavProps) {
-  const labels = { ...defaultSubNavLabels, ...labelsProp }
-
-  const { isStuck, stuckRef } = useStuckRef([])
-
-  return (
-    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
-      [style.isSticky]: isStuck,
-    })} ref={stuckRef}>
-      <Disclosure as="nav" >
-        {({ open }) => (
-          <>
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-              <div className="flex justify-between h-16">
-                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
-                
-                  <div className="flex-shrink-0 flex items-center ">
-                    {titleLink &&<TitleLink
-                      text={titleLink.text}
-
-                      url={titleLink.url} >{titleContent}</TitleLink>}
-                      {!titleLink && titleContent}
-                  </div>
-                  <div className="hidden sm:-my-px sm:ml-6 sm:flex">
-                    <MenuItemsDefault
-                      menuItems={menuItems}
-                    />
-                    <CtaLinks
-                      hideGithubStars={hideGithubStars}
-                      isInDropdown={false}
-                      links={ctaLinks}
-                    />
-                  </div>
-                </div>
-
-                <div className="-mr-2 flex items-center sm:hidden ">
-                  {/* Mobile menu button */}
-                  <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-control 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">{labels.openMainMenu}</span>
-                    {open ? (
-                      <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
-                    ) : (
-                      <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
-                    )}
-                  </DisclosureButton>
-                </div>
-              </div>
-
-            </div>
-
-            <DisclosurePanel className="sm:hidden">
-              <div className="pt-2 pb-3 space-y-1">
-                <MenuItemsOverflow
-                  ctaLinks={ctaLinks}
-                  hideGithubStars={hideGithubStars}
-                  menuItems={menuItems}
-                />          </div>
-
-            </DisclosurePanel>
-          </>
-        )}
-      </Disclosure>
-    </div>
-  )
-}
-
-export default Subnav
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import type { LinkType, Variant } from '@dbosoft/react-uicore/linkbutton'
+import MenuItemsOverflow from './partials/MenuItemsOverflow'
+import MenuItemsDefault from './partials/MenuItemsDefault'
+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'
+
+export type MenuItem = 'divider' | ILinkMenuItem;
+
+export interface IDropDownMenuItem {
+  text: string,
+  submenu: ILinkMenuItem[]
+}
+
+export interface ILinkMenuItem {
+  text: string,
+  url: string,
+  type: 'inbound' | 'outbound' | 'anchor'
+  active?: boolean
+}
+
+export interface ITitleLink {
+  url: string,
+  text?: string,
+}
+
+
+export interface ICtaItem {
+  text: string,
+  url: string,
+  variant?: Variant
+  linktype?: LinkType
+  className?: string,
+}
+
+export interface SubNavLabels {
+  openMainMenu: string
+}
+
+const defaultSubNavLabels: SubNavLabels = {
+  openMainMenu: 'Open main menu',
+}
+
+interface ISubNavProps {
+  titleLink?: ITitleLink,
+  titleContent?: React.JSX.Element,
+  ctaLinks: ICtaItem[],
+  hideGithubStars: boolean
+  menuItems: MenuItem[],
+  menuItemsAlign: 'left' | 'right',
+  className?: string,
+  labels?: Partial<SubNavLabels>
+}
+
+function Subnav({
+  className,
+  titleLink,
+  ctaLinks = [],
+  hideGithubStars,
+  menuItems,
+  menuItemsAlign = `right`,
+  titleContent,
+  labels: labelsProp
+}: ISubNavProps) {
+  const labels = { ...defaultSubNavLabels, ...labelsProp }
+
+  const { isStuck, stuckRef } = useStuckRef([])
+
+  return (
+    <div className={clsx(style.root, `bg-white dark:bg-slate-900`, className, {
+      [style.isSticky]: isStuck,
+    })} ref={stuckRef}>
+      <Disclosure as="nav" >
+        {({ open }) => (
+          <>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex justify-between h-16">
+                <div className={clsx(`flex grow`, menuItemsAlign == `right` ? ` justify-between` : ``)}>
+                
+                  <div className="flex-shrink-0 flex items-center ">
+                    {titleLink &&<TitleLink
+                      text={titleLink.text}
+
+                      url={titleLink.url} >{titleContent}</TitleLink>}
+                      {!titleLink && titleContent}
+                  </div>
+                  <div className="hidden sm:-my-px sm:ml-6 sm:flex">
+                    <MenuItemsDefault
+                      menuItems={menuItems}
+                    />
+                    <CtaLinks
+                      hideGithubStars={hideGithubStars}
+                      isInDropdown={false}
+                      links={ctaLinks}
+                    />
+                  </div>
+                </div>
+
+                <div className="-mr-2 flex items-center sm:hidden ">
+                  {/* Mobile menu button */}
+                  <DisclosureButton className="bg-white inline-flex items-center justify-center p-2 rounded-control 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">{labels.openMainMenu}</span>
+                    {open ? (
+                      <XMarkIcon aria-hidden="true" className="block h-6 w-6" />
+                    ) : (
+                      <Bars3Icon aria-hidden="true" className="block h-6 w-6" />
+                    )}
+                  </DisclosureButton>
+                </div>
+              </div>
+
+            </div>
+
+            <DisclosurePanel className="sm:hidden">
+              <div className="pt-2 pb-3 space-y-1">
+                <MenuItemsOverflow
+                  ctaLinks={ctaLinks}
+                  hideGithubStars={hideGithubStars}
+                  menuItems={menuItems}
+                />          </div>
+
+            </DisclosurePanel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  )
+}
+
+export default Subnav

package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.js

@@ -1,25 +1,25 @@
-import formatStarCount from './index.js'
-
-describe('<Subnav /> - formatStarCount', () => {
-  it('should return zero for an undefined, null, or zero count', () => {
-    expect(formatStarCount(undefined)).toBe(false)
-    expect(formatStarCount(null)).toBe(false)
-    expect(formatStarCount(0)).toBe(false)
-  })
-
-  it('should return numbers 1 to 999 without formatting', () => {
-    expect(formatStarCount(1)).toBe('1')
-    expect(formatStarCount(999)).toBe('999')
-  })
-
-  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
-    expect(formatStarCount(1003)).toBe('1.0k')
-    expect(formatStarCount(1280)).toBe('1.2k')
-    expect(formatStarCount(15630)).toBe('15.6k')
-  })
-
-  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
-    expect(formatStarCount(100000)).toBe('100k')
-    expect(formatStarCount(156783)).toBe('156k')
-  })
-})
+import formatStarCount from './index.js'
+
+describe('<Subnav /> - formatStarCount', () => {
+  it('should return zero for an undefined, null, or zero count', () => {
+    expect(formatStarCount(undefined)).toBe(false)
+    expect(formatStarCount(null)).toBe(false)
+    expect(formatStarCount(0)).toBe(false)
+  })
+
+  it('should return numbers 1 to 999 without formatting', () => {
+    expect(formatStarCount(1)).toBe('1')
+    expect(formatStarCount(999)).toBe('999')
+  })
+
+  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
+    expect(formatStarCount(1003)).toBe('1.0k')
+    expect(formatStarCount(1280)).toBe('1.2k')
+    expect(formatStarCount(15630)).toBe('15.6k')
+  })
+
+  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
+    expect(formatStarCount(100000)).toBe('100k')
+    expect(formatStarCount(156783)).toBe('156k')
+  })
+})

package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.js

@@ -1,25 +1,25 @@
-import parseGithubUrl from './index.js'
-
-describe('<Subnav /> - parseGithubUrl', () => {
-  it('should gracefully handle an invalid URL', () => {
-    //  Suppress console.warn for this test, we expect warnings
-    jest.spyOn(console, 'warn')
-    global.console.warn.mockImplementation(() => {})
-    expect(parseGithubUrl(undefined)).toBe(false)
-    expect(parseGithubUrl('blah-blah')).toBe(false)
-    //  Restore console.warn for further tests
-    global.console.warn.mockRestore()
-  })
-
-  it('should handle a non-GitHub URL', () => {
-    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
-      false
-    )
-  })
-
-  it('should parse the org and repo from a GitHub URL', () => {
-    const testInput = 'https://www.github.com/dbosoft/maxback'
-    expect(parseGithubUrl(testInput).repo).toBe('maxback')
-    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
-  })
-})
+import parseGithubUrl from './index.js'
+
+describe('<Subnav /> - parseGithubUrl', () => {
+  it('should gracefully handle an invalid URL', () => {
+    //  Suppress console.warn for this test, we expect warnings
+    jest.spyOn(console, 'warn')
+    global.console.warn.mockImplementation(() => {})
+    expect(parseGithubUrl(undefined)).toBe(false)
+    expect(parseGithubUrl('blah-blah')).toBe(false)
+    //  Restore console.warn for further tests
+    global.console.warn.mockRestore()
+  })
+
+  it('should handle a non-GitHub URL', () => {
+    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
+      false
+    )
+  })
+
+  it('should parse the org and repo from a GitHub URL', () => {
+    const testInput = 'https://www.github.com/dbosoft/maxback'
+    expect(parseGithubUrl(testInput).repo).toBe('maxback')
+    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
+  })
+})

package/src/subnav/partials/CtaLinks/icons/github.svg

@@ -1,4 +1,4 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <title>GitHub</title>
-    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>GitHub</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 </svg>

package/src/subnav/partials/MenuItemsDefault/style.module.scss

@@ -1,71 +1,71 @@
-.root {
-  display: flex;
-  padding: 0 32px;
-  margin: 0 auto;
-  align-items: center;
-  list-style: none;
-
-  &.alignRight {
-    margin-right: 0;
-    padding-right: 16px;
-  }
-}
-
-.listItem {
-  position: relative;
-  white-space: nowrap;
-  margin: 0;
-  padding: 0;
-}
-
-.navLink {
-  composes: g-type-body-small-strong from global;
-  position: relative;
-  padding: 0 16px;
-  line-height: 2.5rem;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  color: var(--black);
-}
-
-.submenuModal {
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  background: var(--white);
-  z-index: 1;
-  display: block;
-  position: absolute;
-  top: 100%;
-  margin: 8px 0 0 0;
-  padding: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  list-style: none;
-
-  & li {
-    & a:hover .text {
-      text-decoration: underline;
-    }
-
-    & + li {
-      margin-top: 6px;
-    }
-  }
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.verticalDivider {
-  background: var(--gray-5);
-  height: 1.75rem;
-  width: 1px;
-  margin: 0 8px;
-  display: block;
-}
+.root {
+  display: flex;
+  padding: 0 32px;
+  margin: 0 auto;
+  align-items: center;
+  list-style: none;
+
+  &.alignRight {
+    margin-right: 0;
+    padding-right: 16px;
+  }
+}
+
+.listItem {
+  position: relative;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+}
+
+.navLink {
+  composes: g-type-body-small-strong from global;
+  position: relative;
+  padding: 0 16px;
+  line-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  color: var(--black);
+}
+
+.submenuModal {
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  background: var(--white);
+  z-index: 1;
+  display: block;
+  position: absolute;
+  top: 100%;
+  margin: 8px 0 0 0;
+  padding: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  list-style: none;
+
+  & li {
+    & a:hover .text {
+      text-decoration: underline;
+    }
+
+    & + li {
+      margin-top: 6px;
+    }
+  }
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.verticalDivider {
+  background: var(--gray-5);
+  height: 1.75rem;
+  width: 1px;
+  margin: 0 8px;
+  display: block;
+}

package/src/subnav/partials/MenuItemsOverflow/style.module.scss

@@ -1,51 +1,51 @@
-.root {
-  position: relative;
-  margin-left: auto;
-}
-
-.dropdown {
-  background: var(--white);
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  margin-top: 8px;
-  max-height: calc(100vh - 300%);
-  overflow-y: auto;
-  padding: 12px 24px 0 24px;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  width: 256px;
-  z-index: 1;
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.ulElem {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.submenuTitle {
-  composes: g-type-label from global;
-  margin: 12px 0 8px 0;
-  color: var(--gray-3);
-}
-
-.divider {
-  margin: 12px 0;
-  border: 0;
-  padding: 0;
-  height: 1px;
-  background: var(--gray-5);
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  display: block;
-  padding: 4px 0;
-  line-height: 1.6em;
-  color: var(--black);
-}
+.root {
+  position: relative;
+  margin-left: auto;
+}
+
+.dropdown {
+  background: var(--white);
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin-top: 8px;
+  max-height: calc(100vh - 300%);
+  overflow-y: auto;
+  padding: 12px 24px 0 24px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 256px;
+  z-index: 1;
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.ulElem {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.submenuTitle {
+  composes: g-type-label from global;
+  margin: 12px 0 8px 0;
+  color: var(--gray-3);
+}
+
+.divider {
+  margin: 12px 0;
+  border: 0;
+  padding: 0;
+  height: 1px;
+  background: var(--gray-5);
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  display: block;
+  padding: 4px 0;
+  line-height: 1.6em;
+  color: var(--black);
+}

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

@@ -1,25 +1,25 @@
-import type { FC, ReactElement, ReactNode } from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-import Link from 'next/link'
-
-
-const TitleLink: FC<{
-  text?: string,
-  url: string,
-  children?: ReactNode
-}> = ({
-  text,
-  url, children }) => {
-    return (
-      <LinkWrap
-        Link={Link}
-        className="font-semibold text-gray-900 tracking-widest text-lg inline"
-        href={url}
-        title={text}
-      >{text}
-        {children}
-      </LinkWrap>
-    )
-  }
-
-export default TitleLink
+import type { FC, ReactElement, ReactNode } from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import Link from 'next/link'
+
+
+const TitleLink: FC<{
+  text?: string,
+  url: string,
+  children?: ReactNode
+}> = ({
+  text,
+  url, children }) => {
+    return (
+      <LinkWrap
+        Link={Link}
+        className="font-semibold text-gray-900 tracking-widest text-lg inline"
+        href={url}
+        title={text}
+      >{text}
+        {children}
+      </LinkWrap>
+    )
+  }
+
+export default TitleLink

package/src/subnav/partials/nav-item-text/style.module.scss

@@ -1,19 +1,19 @@
-.root {
-  color: var(--black);
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 2px;
-    background: var(--black);
-    opacity: 0;
-  }
-
-  &.isActive::after {
-    opacity: 1;
-  }
-}
+.root {
+  color: var(--black);
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: var(--black);
+    opacity: 0;
+  }
+
+  &.isActive::after {
+    opacity: 1;
+  }
+}

package/src/subnav/style.module.scss

@@ -1,13 +1,13 @@
-.root {
-  --gray-6-transparent: rgba(174, 176, 183, 0.45);
-  position: sticky;
-  top: -1px;
-  z-index: 800;
-  border-top: 1px solid var(--gray-6-transparent);
-  border-bottom: 1px solid transparent;
-  transition: border-bottom-color 0.8s;
-
-  &.isSticky {
-    border-bottom-color: var(--gray-6-transparent);
-  }
-}
+.root {
+  --gray-6-transparent: rgba(174, 176, 183, 0.45);
+  position: sticky;
+  top: -1px;
+  z-index: 800;
+  border-top: 1px solid var(--gray-6-transparent);
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.8s;
+
+  &.isSticky {
+    border-bottom-color: var(--gray-6-transparent);
+  }
+}

package/src/themeselector/index.tsx

@@ -1,139 +1,139 @@
-import { useEffect, useState } from 'react'
-import { useTheme } from 'next-themes'
-import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/react'
-import clsx from 'clsx'
-
-export interface ThemeSelectorLabels {
-  light: string
-  dark: string
-  system: string
-  theme: string
-  themeAriaLabel: string
-}
-
-const defaultThemeSelectorLabels: ThemeSelectorLabels = {
-  light: 'Light',
-  dark: 'Dark',
-  system: 'System',
-  theme: 'Theme',
-  themeAriaLabel: 'Theme',
-}
-
-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({
-  labels: labelsProp,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof Listbox<'div'>> & {
-  labels?: Partial<ThemeSelectorLabels>
-}) {
-  const labels = { ...defaultThemeSelectorLabels, ...labelsProp }
-  const themes = [
-    { name: labels.light, value: 'light', icon: LightIcon },
-    { name: labels.dark, value: 'dark', icon: DarkIcon },
-    { name: labels.system, value: 'system', icon: SystemIcon },
-  ]
-
-  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">{labels.theme}</ListboxLabel>
-      <ListboxButton
-        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
-          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-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}
-            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-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',
-                      selected
-                        ? 'fill-sky-400 dark:fill-sky-400'
-                        : 'fill-slate-400',
-                    )}
-                  />
-                </div>
-                <div className="ml-3">{theme.name}</div>
-              </>
-            )}
-          </ListboxOption>
-        ))}
-      </ListboxOptions>
-    </Listbox>
-  )
-}
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/react'
+import clsx from 'clsx'
+
+export interface ThemeSelectorLabels {
+  light: string
+  dark: string
+  system: string
+  theme: string
+  themeAriaLabel: string
+}
+
+const defaultThemeSelectorLabels: ThemeSelectorLabels = {
+  light: 'Light',
+  dark: 'Dark',
+  system: 'System',
+  theme: 'Theme',
+  themeAriaLabel: 'Theme',
+}
+
+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({
+  labels: labelsProp,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Listbox<'div'>> & {
+  labels?: Partial<ThemeSelectorLabels>
+}) {
+  const labels = { ...defaultThemeSelectorLabels, ...labelsProp }
+  const themes = [
+    { name: labels.light, value: 'light', icon: LightIcon },
+    { name: labels.dark, value: 'dark', icon: DarkIcon },
+    { name: labels.system, value: 'system', icon: SystemIcon },
+  ]
+
+  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">{labels.theme}</ListboxLabel>
+      <ListboxButton
+        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
+          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-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}
+            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-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',
+                      selected
+                        ? 'fill-sky-400 dark:fill-sky-400'
+                        : 'fill-slate-400',
+                    )}
+                  />
+                </div>
+                <div className="ml-3">{theme.name}</div>
+              </>
+            )}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    </Listbox>
+  )
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-    "extends": "@dbosoft/typescript-config/nextjs.json",
-    "compilerOptions": {
-      "outDir": "dist"
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "dist"]
+{
+    "extends": "@dbosoft/typescript-config/nextjs.json",
+    "compilerOptions": {
+      "outDir": "dist"
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
   }