Add ModeToggleGroup Component and Update Documentation

.github/workflows/close-issue-pull-request.yml

@@ -0,0 +1,26 @@
+name: Close Inactive Issues
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v5
+        with:
+          days-before-issue-stale: 60
+          days-before-issue-close: 14
+          stale-issue-label: "stale"
+          stale-issue-message: "This issue is stale because it has been open for 60 days with no activity."
+          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          #   close-pr-message: "This pull request is stale because it has been open for -- days with no activity."
+          #   stale-pr-message: "This pull request was closed because it has been inactive for -- days since being marked as stale."
+          exempt-issue-labels: "bug,enhancement"
+          exempt-pr-labels: "bug,enhancement"
+          repo-token: ${{ secrets.GITHUB_TOKEN  }}

.github/workflows/code-check.yml

@@ -18,11 +18,11 @@ jobs:
         with:
           node-version: 18
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.4.0
           run_install: false
 
       - name: Get pnpm store directory
@@ -39,49 +39,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - run: pnpm lint:fix
-
-  eslint_fix:
-    runs-on: ubuntu-latest
-    name: pnpm lint:fix
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - uses: pnpm/[email protected]
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 8.6.1
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - run: pnpm eslint:fix
+      - run: pnpm lint
 
   tsc:
     runs-on: ubuntu-latest
     name: pnpm typecheck
+    env:
+      NEXT_PUBLIC_APP_URL: http://localhost:3001
     steps:
       - uses: actions/checkout@v3
         with:
@@ -92,11 +56,11 @@ jobs:
         with:
           node-version: 18
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.4.0
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/test.yml

@@ -18,11 +18,11 @@ jobs:
         with:
           node-version: 18
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.4.0
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/welcome-contributor.yml

@@ -13,7 +13,6 @@ jobs:
       - name: "Greet the contributor"
         uses: actions/first-interaction@v1
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          is-oauth-token: true
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
           issue-message: "Hello there 👋 Thanks for opening your first issue. We welcome you to the ${{ github.event.repository.name }} community! 😊"
           pr-message: "Hello there 👋 Thanks for opening your first Pull Request. Someone will review it soon. 😉"

.vscode/settings.json

@@ -50,11 +50,14 @@
     "**/app/**/layout.tsx": "${dirname(1)}/${dirname} <layout />",
     "**/app/**/route.ts": "${dirname(1)}/${dirname} <route />",
     "**/components/**/*.tsx": "${dirname(1)}/${filename} <component />",
-    "**/components/**/*.ts": "${dirname(1)}/${filename} <component />"
+    "**/components/**/*.ts": "${dirname(1)}/${filename} <component />",
+    "**/package.json": "${dirname(1)}/${dirname} <package.json />",
+    "**/index.ts": "${dirname(1)}/${dirname} <index.ts />",
+    "**/tsconfig.json": "${dirname(1)}/${dirname} <tsconfig.json />"
   },
   "search.useIgnoreFiles": true,
   "cSpell.words": [
-   "pullup",
-   "shadcn"
-]
+    "pullup",
+    "shadcn"
+  ]
 }

apps/web/__registry__/index.tsx

@@ -2755,6 +2755,17 @@ export const Index: Record<string, any> = {
          subcategory: 'undefined',
          chunks: [],
       },
+      'mode-toggle-group': {
+         name: 'mode-toggle-group',
+         type: 'components:example',
+         registryDependencies: undefined,
+         component: React.lazy(() => import('~/registry/default/example/mode-toggle-group')),
+         source: '',
+         files: ['registry/default/example/mode-toggle-group.tsx'],
+         category: 'undefined',
+         subcategory: 'undefined',
+         chunks: [],
+      },
       'tooltip-demo': {
          name: 'tooltip-demo',
          type: 'components:example',
@@ -7335,6 +7346,17 @@ export const Index: Record<string, any> = {
          subcategory: 'undefined',
          chunks: [],
       },
+      'mode-toggle-group': {
+         name: 'mode-toggle-group',
+         type: 'components:example',
+         registryDependencies: undefined,
+         component: React.lazy(() => import('~/registry/miami/example/mode-toggle-group')),
+         source: '',
+         files: ['registry/miami/example/mode-toggle-group.tsx'],
+         category: 'undefined',
+         subcategory: 'undefined',
+         chunks: [],
+      },
       'tooltip-demo': {
          name: 'tooltip-demo',
          type: 'components:example',

apps/web/app/(marketing)/[...slug]/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { Mdx } from '~/components/mdx-components'
 import { siteConfig } from '~/config/site'
-import { env } from '~/scripts/env.mjs'
+import { env } from '~/scripts/env.mts'
 import { absoluteUrl } from '~/lib/utils'
 import '~/styles/mdx.css'
 

apps/web/components/icons.tsx

@@ -1,4 +1,4 @@
-import { DiscordLogoIcon, InstagramLogoIcon } from '@radix-ui/react-icons'
+import { DiscordLogoIcon } from '@radix-ui/react-icons'
 import {
    AlertTriangle,
    ArrowRight,

apps/web/content/docs/dark-mode/astro.mdx

@@ -98,6 +98,76 @@ export function ModeToggle() {
 }
 ```
 
+**Example 1** using Dropdown Menu
+
+in this example, we will use a `Dropdown Menu` component to toggle between light, dark mode.
+
+```tsx title="src/components/ModeToggle.tsx"
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+	@@ -98,6 +102,65 @@ export function ModeToggle() {
+}
+```
+
+**Example 2** using Toggle Group
+
+in this example, we will use a `Toggle Group` component to toggle between light, dark mode. also, we can change `scale` of this for smaller view.
+
+```tsx title="src/components/ModeToggle.tsx"
+import * as React from "react"
+import { Sun, Moon, Laptop } from "lucide-react"
+
+import { 
+  ToggleGroup, 
+  ToggleGroupItem 
+} from "@/components/ui/toggle-group"
+
+export function ModeToggle() {
+  const [theme, setThemeState] = React.useState<
+    "theme-light" | "dark" | "system"
+  >("theme-light")
+
+  React.useEffect(() => {
+    const isDarkMode = document.documentElement.classList.contains("dark")
+    setThemeState(isDarkMode ? "dark" : "theme-light")
+  }, [])
+
+  React.useEffect(() => {
+    const isDark =
+      theme === "dark" ||
+      (theme === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    document.documentElement.classList[isDark ? "add" : "remove"]("dark")
+  }, [theme])
+
+  return (
+    <ToggleGroup type="single" className="border p-1 rounded-full">
+      <ToggleGroupItem
+        value="Light"
+        className="rounded-full"
+        onClick={() => setThemeState("theme-light")}
+      >
+        <Sun className="h-5 w-5" />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="System"
+        className="rounded-full"
+        onClick={() => setThemeState("system")}
+      >
+        <Laptop className="h-5 w-5" />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="Dark"
+        className="rounded-full"
+        onClick={() => setThemeState("dark")}
+      >
+        <Moon className="h-5 w-5" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
+```
+
 ### Display the mode toggle
 
 Place a mode toggle on your site to toggle between light and dark mode.
@@ -119,3 +189,5 @@ import { ModeToggle } from '@/components/ModeToggle';
 ```
 
 </Steps>
+
+

apps/web/content/docs/dark-mode/next.mdx

@@ -59,6 +59,18 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
 ### Add a mode toggle
 
+**Example 1** using Dropdown Menu
+
+in this example, we will use a `Dropdown Menu` component to toggle between light, dark mode.
+
+<ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />
+
+**Example 2** using Toggle Group
+
+in this example, we will use a `Toggle Group` component to toggle between light, dark mode. also, we can change `scale` of this for smaller view.
+
+<ComponentPreview name="mode-toggle-group" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />
+
 Place a mode toggle on your site to toggle between light and dark mode.
 
 <ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" styleSwitch={true} button="copy" dots={false} />

apps/web/content/docs/dark-mode/remix.mdx

@@ -117,6 +117,61 @@ export const action = createThemeAction(themeSessionResolver)
 
 ### Add a mode toggle
 
+**Example 1** using Dropdown Menu
+
+in this example, we will use a `Dropdown Menu` component to toggle between light, dark mode.
+
+```tsx title="components/mode-toggle.tsx"
+import { Moon, Sun } from "lucide-react"
+	@@ -132,7 +134,7 @@ import {
+} from "./ui/dropdown-menu"
+
+export function ModeToggle() {
+  const [ setTheme ] = useTheme()
+
+  return (
+    <DropdownMenu>
+	@@ -156,4 +158,41 @@ export function ModeToggle() {
+}
+```
+
+**Example 2** using Toggle Group
+
+in this example, we will use a `Toggle Group` component to toggle between light, dark mode. also, we can change `scale` of this for smaller view.
+
+```tsx title="components/mode-toggle.tsx"
+import { Moon, Sun } from "lucide-react"
+import { Theme, useTheme } from "remix-themes"
+
+import { 
+  ToggleGroup, 
+  ToggleGroupItem 
+} from "@/components/ui/toggle-group"
+
+export function ModeToggle() {
+  const [ setTheme ] = useTheme()
+
+  return (
+    <ToggleGroup type="single" className="border p-1 rounded-full">
+      <ToggleGroupItem
+        value="Light"
+        className="rounded-full"
+        onClick={() => setTheme(Theme.LIGHT)}
+      >
+        <Sun className="h-5 w-5" />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="Dark"
+        className="rounded-full"
+        onClick={() => setTheme(Theme.DARK)}
+      >
+        <Moon className="h-5 w-5" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
+```
+
 Place a mode toggle on your site to toggle between light and dark mode.
 
 ```tsx title="components/mode-toggle.tsx"