@dbosoft/nextjs-uicore 1.5.1 → 1.6.1

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/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

@@ -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-lg shadow-md 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-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>
-  )
-}
+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/src/translations.ts

@@ -1,25 +1,25 @@
-import type { ThemeSelectorLabels } from './themeselector'
-import type { SubNavLabels } from './subnav'
-import type { GithubStarsLinkLabels } from './subnav/partials/CtaLinks/github-stars-link'
-
-export const themeSelectorLabels: { de: ThemeSelectorLabels } = {
-  de: {
-    light: 'Hell',
-    dark: 'Dunkel',
-    system: 'System',
-    theme: 'Design',
-    themeAriaLabel: 'Design',
-  },
-}
-
-export const subNavLabels: { de: SubNavLabels } = {
-  de: {
-    openMainMenu: 'Hauptmenü öffnen',
-  },
-}
-
-export const githubStarsLinkLabels: { de: GithubStarsLinkLabels } = {
-  de: {
-    github: 'Github',
-  },
-}
+import type { ThemeSelectorLabels } from './themeselector'
+import type { SubNavLabels } from './subnav'
+import type { GithubStarsLinkLabels } from './subnav/partials/CtaLinks/github-stars-link'
+
+export const themeSelectorLabels: { de: ThemeSelectorLabels } = {
+  de: {
+    light: 'Hell',
+    dark: 'Dunkel',
+    system: 'System',
+    theme: 'Design',
+    themeAriaLabel: 'Design',
+  },
+}
+
+export const subNavLabels: { de: SubNavLabels } = {
+  de: {
+    openMainMenu: 'Hauptmenü öffnen',
+  },
+}
+
+export const githubStarsLinkLabels: { de: GithubStarsLinkLabels } = {
+  de: {
+    github: 'Github',
+  },
+}