Merge branch 'master' into feat/sql-editor-support-bulk-deletes

apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

@@ -31,9 +31,6 @@ export const RegionSelector = ({
   useEffect(() => {
     // only pick a region if one hasn't already been selected
     if (isSuccess && region && !selectedRegion) {
-      // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD
-      if (process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' && region === 'Southeast Asia (Singapore)')
-        return
       onSelectRegion(region)
     } else if (isError && !selectedRegion) {
       // if an error happened, and the user haven't selected a region, just select the default one for him

apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx

@@ -37,6 +37,7 @@ import { useDatabaseSettingsStateSnapshot } from 'state/database-settings'
 import { SESSION_MODE_DESCRIPTION, TRANSACTION_MODE_DESCRIPTION } from '../Database.constants'
 import { POOLING_OPTIMIZATIONS } from './ConnectionPooling.constants'
 import { useMaxConnectionsQuery } from 'data/database/max-connections-query'
+import { CriticalIcon } from 'components/ui/Icons'
 
 const formId = 'connection-pooling-form'
 
@@ -284,6 +285,19 @@ export const ConnectionPooling = () => {
                                 Unsure which pooling mode to use?
                               </span>
                             </p>
+                            {field.value === 'session' && (
+                              <Alert_Shadcn_>
+                                <AlertTitle_Shadcn_ className="text-foreground">
+                                  Set to transaction mode to use both pooling modes concurrently
+                                </AlertTitle_Shadcn_>
+                                <AlertDescription_Shadcn_>
+                                  Session mode can be used concurrently with transaction mode by
+                                  using 5432 for session and 6543 for session. However, by
+                                  configuring the pooler mode to session here, you will not be able
+                                  to use transaction mode at the same time.
+                                </AlertDescription_Shadcn_>
+                              </Alert_Shadcn_>
+                            )}
                           </FormDescription_Shadcn_>
                           <FormMessage_Shadcn_ className="col-start-5 col-span-8" />
                         </FormItem_Shadcn_>

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseConnectionString.tsx

@@ -56,9 +56,7 @@ export const DatabaseConnectionString = () => {
 
   const connectionStringsRef = useRef<HTMLDivElement>(null)
   const [usePoolerConnection, setUsePoolerConnection] = useState(true)
-  const [poolingMode, setPoolingMode] = useState<'transaction' | 'session' | 'statement'>(
-    'transaction'
-  )
+  const [poolingMode, setPoolingMode] = useState<'transaction' | 'session' | 'statement'>('session')
   const [selectedTab, setSelectedTab] = useState<
     'uri' | 'psql' | 'golang' | 'jdbc' | 'dotnet' | 'nodejs' | 'php' | 'python'
   >('uri')
@@ -151,7 +149,7 @@ export const DatabaseConnectionString = () => {
   }, [connectionString])
 
   useEffect(() => {
-    if (poolingInfo?.pool_mode !== undefined) {
+    if (poolingInfo?.pool_mode === 'session') {
       setPoolingMode(poolingInfo.pool_mode)
     }
   }, [poolingInfo?.pool_mode])

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/DatabaseSettings.tsx

@@ -7,6 +7,7 @@ import DatabaseSelector from 'components/ui/DatabaseSelector'
 import Panel from 'components/ui/Panel'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { usePoolingConfigurationQuery } from 'data/database/pooling-configuration-query'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { useFlag, useSelectedProject } from 'hooks'
 import { pluckObjectFields } from 'lib/helpers'
@@ -21,9 +22,8 @@ import {
 } from 'ui'
 import { IPv4DeprecationNotice } from '../IPv4DeprecationNotice'
 import { UsePoolerCheckbox } from '../UsePoolerCheckbox'
-import ResetDbPassword from './ResetDbPassword'
-import { usePoolingConfigurationQuery } from 'data/database/pooling-configuration-query'
 import { getHostFromConnectionString } from './DatabaseSettings.utils'
+import ResetDbPassword from './ResetDbPassword'
 
 const DatabaseSettings = () => {
   const router = useRouter()
@@ -36,9 +36,7 @@ const DatabaseSettings = () => {
   const showReadReplicasUI = readReplicasEnabled && selectedProject?.is_read_replicas_enabled
   const connectionStringsRef = useRef<HTMLDivElement>(null)
   const [usePoolerConnection, setUsePoolerConnection] = useState(true)
-  const [poolingMode, setPoolingMode] = useState<'transaction' | 'session' | 'statement'>(
-    'transaction'
-  )
+  const [poolingMode, setPoolingMode] = useState<'transaction' | 'session' | 'statement'>('session')
 
   const {
     data: poolingInfo,
@@ -116,7 +114,7 @@ const DatabaseSettings = () => {
   }, [connectionString])
 
   useEffect(() => {
-    if (poolingInfo?.pool_mode !== undefined) {
+    if (poolingInfo?.pool_mode === 'session') {
       setPoolingMode(poolingInfo.pool_mode)
     }
   }, [poolingInfo?.pool_mode])

apps/studio/components/interfaces/Settings/Database/UsePoolerCheckbox.tsx

@@ -1,6 +1,4 @@
-import * as Tooltip from '@radix-ui/react-tooltip'
 import { useParams } from 'common'
-import { useState } from 'react'
 import {
   Badge,
   Button,
@@ -9,15 +7,17 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  IconCheck,
   IconChevronDown,
   Separator,
 } from 'ui'
 
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { usePgBouncerStatus } from 'data/config/pgbouncer-enabled-query'
 import { useProjectSettingsQuery } from 'data/config/project-settings-query'
 import { usePoolingConfigurationQuery } from 'data/database/pooling-configuration-query'
+import { useEffect, useState } from 'react'
 import { useDatabaseSettingsStateSnapshot } from 'state/database-settings'
-import { usePgBouncerStatus } from 'data/config/pgbouncer-enabled-query'
 
 interface UsePoolerCheckboxInterface {
   id: string
@@ -34,6 +34,7 @@ export const UsePoolerCheckbox = ({
   onCheckedChange,
   onSelectPoolingMode,
 }: UsePoolerCheckboxInterface) => {
+  const [open, setOpen] = useState(false)
   const { ref: projectRef } = useParams()
   const snap = useDatabaseSettingsStateSnapshot()
 
@@ -43,6 +44,11 @@ export const UsePoolerCheckbox = ({
 
   const resolvesToIpV6 = settings?.project.db_ip_addr_config === 'ipv6'
 
+  const onSelectOption = (value: 'session' | 'transaction') => {
+    onSelectPoolingMode(value)
+    setOpen(false)
+  }
+
   return (
     <>
       <div className="flex flex-col gap-y-1">
@@ -64,7 +70,7 @@ export const UsePoolerCheckbox = ({
                       {isLoading && <ShimmeringLoader className="w-[100px] py-2.5" />}
                       {isSuccess && (
                         <div className="flex items-center gap-x-1">
-                          <DropdownMenu>
+                          <DropdownMenu open={open} onOpenChange={setOpen}>
                             <DropdownMenuTrigger asChild>
                               <Button
                                 type="outline"
@@ -74,49 +80,67 @@ export const UsePoolerCheckbox = ({
                                 <span className="capitalize">Mode: {poolingMode}</span>
                               </Button>
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent side="bottom" align="start">
-                              <DropdownMenuItem
-                                key="transaction"
-                                onClick={() => onSelectPoolingMode('transaction')}
-                              >
-                                <Tooltip.Root delayDuration={0}>
-                                  <Tooltip.Trigger asChild>
-                                    <span className="w-full">Transaction mode</span>
-                                  </Tooltip.Trigger>
-                                  {data.pool_mode === 'session' && (
-                                    <Tooltip.Portal>
-                                      <Tooltip.Content side="right">
-                                        <Tooltip.Arrow className="radix-tooltip-arrow" />
-                                        <div
-                                          className={[
-                                            'rounded bg-alternative py-1 px-2 leading-none shadow',
-                                            'border border-background w-[380px]',
-                                          ].join(' ')}
-                                        >
-                                          <span className="text-xs text-foreground">
-                                            Pooling mode is currently configured to use session
-                                            mode. If you want to use both session mode and
-                                            transaction mode at the same time, change the pooling
-                                            mode to transaction first in the pooler configuration
-                                            settings. You can then connect to session mode on port
-                                            5432 and transaction mode on port 6543
-                                          </span>
-                                        </div>
-                                      </Tooltip.Content>
-                                    </Tooltip.Portal>
-                                  )}
-                                </Tooltip.Root>
-                              </DropdownMenuItem>
+                            <DropdownMenuContent side="bottom" align="start" className="w-[280px]">
                               <DropdownMenuItem
                                 key="session"
-                                onClick={() => onSelectPoolingMode('session')}
+                                className="flex items-center justify-between"
+                                onClick={() => onSelectOption('session')}
                               >
-                                Session mode
+                                <span>Session mode</span>
+                                {poolingMode === 'session' && <IconCheck className="text-brand" />}
                               </DropdownMenuItem>
+                              {data.pool_mode === 'transaction' && (
+                                <DropdownMenuItem
+                                  key="session"
+                                  className="flex items-center justify-between"
+                                  onClick={() => onSelectOption('transaction')}
+                                >
+                                  <span>Transaction mode</span>
+                                  {poolingMode === 'transaction' && (
+                                    <IconCheck className="text-brand" />
+                                  )}
+                                </DropdownMenuItem>
+                              )}
+
+                              {data.pool_mode === 'session' && (
+                                <>
+                                  <Separator className="my-1" />
+                                  <div className="px-2 text-xs flex flex-col gap-y-2">
+                                    <p>
+                                      To use transaction mode, change the pool mode in the{' '}
+                                      <span
+                                        tabIndex={0}
+                                        className="underline hover:text-foreground cursor-pointer transition"
+                                        onClick={() => {
+                                          const el = document.getElementById('connection-pooler')
+                                          if (el) {
+                                            setOpen(false)
+                                            el.scrollIntoView({
+                                              behavior: 'smooth',
+                                              block: 'center',
+                                            })
+                                          }
+                                        }}
+                                      >
+                                        pooling configuration settings
+                                      </span>{' '}
+                                      to use transaction mode first.
+                                    </p>
+                                    <p>
+                                      You can then connect to session mode on port 5432 and
+                                      transaction mode on port 6543.
+                                    </p>
+                                  </div>
+                                </>
+                              )}
+
                               <Separator className="my-1" />
                               <DropdownMenuItem
                                 key="more-info"
-                                onClick={() => snap.setShowPoolingModeHelper(true)}
+                                onClick={() => {
+                                  setOpen(false)
+                                  snap.setShowPoolingModeHelper(true)
+                                }}
                               >
                                 How to choose pooling modes?
                               </DropdownMenuItem>

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants.ts

@@ -54,8 +54,7 @@ export const AVAILABLE_REPLICA_REGIONS: Region[] = Object.keys(AWS_REGIONS)
   .map((key) => {
     return {
       key: key as AWS_REGIONS_KEYS,
-      // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD, remove ternary
-      name: AWS_REGIONS?.[key as AWS_REGIONS_KEYS] ?? '',
+      name: AWS_REGIONS?.[key as AWS_REGIONS_KEYS],
       region: AWS_REGIONS_VALUES[key],
       coordinates: AWS_REGIONS_COORDINATES[key],
     }

apps/studio/lib/constants/infrastructure.ts

@@ -1,5 +1,4 @@
 import { components } from 'data/api'
-import { IS_PLATFORM } from '.'
 
 export type CloudProvider = 'FLY' | 'AWS'
 export type Region = typeof AWS_REGIONS | typeof FLY_REGIONS
@@ -17,10 +16,7 @@ export const AWS_REGIONS = {
   // 'North EU': 'North EU',
   CENTRAL_EU: 'Central EU (Frankfurt)',
   SOUTH_ASIA: 'South Asia (Mumbai)',
-  // [Joshen] TEMP FIX BLOCK APSE 1 ON PROD
-  ...(process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
-    ? { SOUTHEAST_ASIA: 'Southeast Asia (Singapore)' }
-    : {}),
+  SOUTHEAST_ASIA: 'Southeast Asia (Singapore)',
   NORTHEAST_ASIA: 'Northeast Asia (Tokyo)',
   NORTHEAST_ASIA_2: 'Northeast Asia (Seoul)',
   OCEANIA: 'Oceania (Sydney)',
@@ -34,11 +30,8 @@ export const FLY_REGIONS = {
   SOUTHEAST_ASIA: 'Singapore',
 } as const
 
-// [Joshen] TEMP FIX BLOCK APSE 1 ON PROD, remove as string
 export const AWS_REGIONS_DEFAULT =
-  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
-    ? (AWS_REGIONS.SOUTHEAST_ASIA as string)
-    : AWS_REGIONS.WEST_US
+  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? AWS_REGIONS.SOUTHEAST_ASIA : AWS_REGIONS.WEST_US
 
 // TO DO, change default to US region for prod
 const FLY_REGIONS_DEFAULT = FLY_REGIONS.SOUTHEAST_ASIA

apps/www/_blog/2024-01-17-what-is-saml-authentication.mdx

@@ -130,7 +130,7 @@ create table invited_users (
 We can create an RLS policy to enforce that a developer in ACME Inc. can only invite someone who is also a developer in the same company:
 
 ```sql
-create policy "View "
+create policy "Can only invite developers in the same organization"
 on invited_users
 as restrictive
 for insert

apps/www/_blog/2024-01-26-flutter-figma-clone.mdx

@@ -35,8 +35,6 @@ We are building an interactive design canvas app where multiple users can collab
   />
 </video>
 
-https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/videos/marketing/blog/flutter-figma-clone/flutter-figma-clone.mp4
-
 Okay, Figma clone might be an overstatement. However, the point of this article is to demonstrate how to build a collaborative app with all the fundamental elements of a collaborative design canvas. You can take the concepts of this app, add features, refine it, and make it as sophisticated as Figma.
 
 ## Setting up the app
@@ -859,3 +857,9 @@ At this point, we have implemented everything we need to create a collaborative
 In this article, we learned how we can combine the [Supabase Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast) feature with Flutter’s `CustomPainter` to create a collaborative design app. We learned how to implement real-time communication between multiple clients using the Broadcast feature, and how we can broadcast the shape and cursor data to other connected clients in real-time.
 
 This article only used circles and rectangles to keep things simple, but you can easily add support for other types of objects like texts or arrows just by extending the `CanvasObject` class to make the app more like Figma. Another fun way to expand this app would be to add authentication using [Supabase Auth](https://supabase.com/docs/guides/auth) so that we can add proper authorizations. Adding an image upload feature using [Supabase Storage](https://supabase.com/docs/guides/storage) would certainly open up more creative options for the app.
+
+## Resources
+
+- [Create live cursor app with Flutter and Supabase video](https://www.youtube.com/watch?v=QhRNXlFLaeE)
+- [How to build a real-time multiplayer game with Flutter Flame](https://supabase.com/blog/flutter-real-time-multiplayer-game)
+- [Getting started with Flutter authentication](https://supabase.com/blog/flutter-authentication)

apps/www/_blog/2024-01-31-nosql-mongodb-compatibility-with-ferretdb-and-flydotio.mdx

@@ -0,0 +1,204 @@
+---
+title:
+description: 'NoSQL Postgres: Add MongoDB compatibility to your Supabase projects with FerretDB'
+author: thor_schaeff
+image: getting-started/ferretdb/ferretdb.jpg
+thumb: getting-started/ferretdb/ferretdb.jpg
+categories:
+  - engineering
+tags:
+  - postgres
+  - developers
+  - mongodb
+date: '2024-01-31'
+toc_depth: 3
+---
+
+[FerretDB](https://www.ferretdb.com/) is an open source document database that adds MongoDB compatibility to other database backends, such as [Postgres](https://www.postgresql.org/) and [SQLite](https://www.sqlite.org/).
+By using FerretDB, developers can [access familiar MongoDB features and tools using the same syntax and commands](https://blog.ferretdb.io/mongodb-crud-operations-with-ferretdb/) for many of their use cases.
+
+In this post, we'll start from scratch, running FerretDB locally via Docker, trying out the connection with `mongosh` and the MongoDB Node.js client, and finally deploy FerretDB to [Fly.io](https://fly.io/) for a production ready set up.
+
+If you prefer video guide, you can follow along below. And make sure to subscribe to the [Supabase YouTube channel](https://www.youtube.com/channel/UCNTVzV1InxHV-YR0fSajqPQ?view_as=subscriber&sub_confirmation=1)!
+
+<div className="video-container">
+  <iframe
+    className="w-full"
+    src="https://www.youtube-nocookie.com/embed/8EKi2dV51TY"
+    title="YouTube video player"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  />
+</div>
+
+## Prerequisites
+
+- A Supabase project. Create yours here: [database.new](https://database.new).
+- [Docker](https://www.docker.com/) or [Orbstack](https://orbstack.dev/).
+- [Optional] A [Fly.io](https://fly.io/) account for production deployment.
+
+## Run FerretDB locally with Docker
+
+FerretDB provides a [Docker image](https://github.com/ferretdb/FerretDB/pkgs/container/ferretdb) allowing us to run it locally, for example via [Orbstack](https://orbstack.dev/), with a couple simple commands.
+
+FerretDB only requires the Postgres database URI to be provided as the `FERRETDB_POSTGRESQL_URL` environment variable. Every Supabase project comes with a full Postgres database. You can find the connection URI string in your [Supabase Dashboard](https://supabase.com/dashboard/project/_/settings/database).
+
+Make sure **Use connection pooling** is checked and **Session mode** is selected. Then copy the URI. Replace the password placeholder with your saved database password.
+
+<Admonition type="tip">
+
+If your network supports IPv6 connections, you can also use the direct connection string. Uncheck **Use connection pooling** and copy the new URI.
+
+</Admonition>
+
+```bash Terminal
+# Set the required environment variables
+export DB_USER=postgres
+export DB_PASSWORD=<your db password>
+export SUPA_PROJECT_REF=<your Supabase project ref>
+export SUPA_REGION=<your project region>
+export DB_URL=postgres://$DB_USER.$SUPA_PROJECT_REF:$DB_PASSWORD@$SUPA_REGION.pooler.supabase.com:5432/postgres
+
+# Run FerretDB in docker container
+docker run -p 27017:27017 -p 8080:8080 -e FERRETDB_POSTGRESQL_URL=$DB_URL ghcr.io/ferretdb/ferretdb
+```
+
+FerretDB runs on the default MongoDB port `27017` and also spins up some monitoring tools on port `8080`. Once up and running you can access these at [localhost:8080](http://localhost:8080).
+
+Once up and running, constructing the MongoDB URI is easil:
+
+```bash Terminal
+export MONGODB_URL=mongodb://$DB_USER.$SUPA_PROJECT_REF:$DB_PASSWORD@127.0.0.1:27017/ferretdb?authMechanism=PLAIN
+```
+
+## Test with `mongosh`
+
+If you have MongoDB installed locally on your machine, you can test via `mongosh`, the MongoDB shell.
+
+```bash Terminal
+mongosh '$MONGODB_URL'
+```
+
+If you don't have MongoDB installed locally, you can run the shell via a Docker container:
+
+```bash Terminal
+docker run --rm -it --entrypoint=mongosh mongo \
+ "$MONGODB_URL"
+```
+
+### Insert documents into FerretDB
+
+With `mongosh` running, let's try to insert some documents into our FerretDB instance.
+You are going to insert two footballer data into a `players` collection.
+
+```json5 ferretdb>
+db.players.insertMany([
+   {
+       futbin_id: 3,
+       player_name: "Giggs",
+       player_extended_name: "Ryan Giggs",
+       quality: "Gold - Rare",
+       overall: 92,
+       nationality: "Wales",
+       position: "LM",
+       pace: 90,
+       dribbling: 91,
+       shooting: 80,
+       passing: 90,
+       defending: 44,
+       physicality: 67
+   },
+   {
+       futbin_id: 4,
+       player_name: "Scholes",
+       player_extended_name: "Paul Scholes",
+       quality: "Gold - Rare",
+       overall: 91,
+       nationality: "England",
+       position: "CM",
+       pace: 72,
+       dribbling: 80,
+       shooting: 87,
+       passing: 91,
+       defending: 64,
+       physicality: 82,
+       base_id: 246
+   }
+]);
+```
+
+Great!
+Now when you run `db.players.find()`, it should return all the documents stored in the collection.
+
+### Update document record in FerretDB
+
+Next, you need to update "Giggs" record to reflect his current position as a `CM`.
+To do this, we can just run an `updateOne` command to target just that particular player:
+
+```json5 ferretdb>
+db.players.updateOne(
+    { player_name: "Giggs" },
+    { $set: { position: "CM" } }
+);
+```
+
+Let's query the collection to see if the changes have been made:
+
+```json5 ferretdb>
+db.players.find({player_name: "Giggs"})
+```
+
+You can run many MongoDB operations on FerretDB. See the [list of supported commands](https://docs.ferretdb.io/reference/supported-commands/) in the FerretDB documentation for more.
+
+## Inspect the JSONB data in the Supabase Dashboard
+
+FerretDB stores each collection in a table on the `ferretdb` schema, each document represented by a JSONB entry. You can inspect this in the [Table Editor](https://supabase.com/dashboard/project/_/editor) in your Supabase Dashboard.
+
+![Supabase Dashboard Table Editor Screenshot](/images/blog/getting-started/ferretdb/table-editor.png)
+
+## Deploy to Fly.io
+
+For production use cases, you can easily deploy FerretDB on Fly. Simply create a `fly.toml` file (make sure to [update `primary_region`](https://fly.io/docs/reference/regions/))
+
+```toml fly.toml
+app = "supa-ferretdb-<your-supabase-project-ref>"
+primary_region = "bos"
+
+[build]
+  image = "ghcr.io/ferretdb/ferretdb"
+
+[[services]]
+  internal_port = 27017
+  protocol = "tcp"
+
+  [[services.ports]]
+    port = "27017"
+
+[[vm]]
+  cpu_kind = "shared"
+  cpus = 1
+  memory_mb = 1024
+```
+
+And follow these [flyctl](https://fly.io/docs/hands-on/install-flyctl/) commands:
+
+- fly launch --no-deploy
+  - An existing fly.toml file was found for app supa-ferretdb?
+  - Would you like to copy its configuration to the new app? (y/N) > y
+- fly secrets set FERRETDB_POSTGRESQL_URL=$DB_URL
+- fly deploy
+- fly ips allocate-v4
+  - Note: this is a paid feature! You can test it for free as long as you [release the dedicated IPv4](https://community.fly.io/t/we-are-going-to-start-charging-for-dedicated-ipv4-in-january-1st/15970#how-not-to-be-billed-2) before the end of the billing period!
+
+Now simply replace `127.0.0.1` in the `MONGODB_URL` with your dedicated IPv4 address and you're ready to roll!
+
+## Conclusion
+
+FerretDB allows you to run MongoDB workloads on Postgres and SQLite. This flexibility means you can easily add MongoDB compatibility to your Supabase projects, while avoiding vendor lock-in and retaining control of your data architecture.
+
+To get started with FerretDB, check out the [FerretDB quickstart guide](https://docs.ferretdb.io/quickstart-guide/).
+
+## More Supabase
+
+- [Migration guides](/docs/guides/resources#migrate-to-supabase)
+- [Options for connecting to your Postgres database](/docs/guides/database/connecting-to-postgres)

apps/www/lib/authors.json

@@ -148,7 +148,7 @@
     "author_id": "tyler_shukert",
     "author": "Tyler Shukert",
     "username": "dshukertjr",
-    "position": "DevRel & Flutter",
+    "position": "DevRel",
     "author_url": "https://twitter.com/dshukertjr",
     "author_image_url": "https://github.com/dshukertjr.png"
   },

packages/ui/src/components/Accordion/Accordion.tsx

@@ -1,10 +1,8 @@
+import * as RadixAccordion from '@radix-ui/react-accordion'
 import React, { createContext, useContext, useState } from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
-
-import * as RadixAccordion from '@radix-ui/react-accordion'
 import { IconChevronDown } from '../Icon/icons/IconChevronDown'
-import { IconChevronUp } from '../Icon/icons/IconChevronUp'
 
 type Type = 'default' | 'bordered'
 type Size = 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'

packages/ui/src/components/Admonition/index.tsx

@@ -1,7 +1,9 @@
-import { cn } from '@ui/lib/utils'
 import { cva } from 'class-variance-authority'
 import { PropsWithChildren } from 'react'
+
+import { cn } from '../../lib/utils/cn'
 import { Alert, AlertDescription, AlertTitle } from './../shadcn/ui/alert'
+
 export interface AdmonitionProps {
   type: 'note' | 'tip' | 'caution' | 'danger' | 'deprecation'
   label?: string

packages/ui/src/components/Alert/Alert.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { Alert, AlertVariant } from './Alert'
 import defaultTheme from '../../lib/theme/defaultTheme'
+import { Alert, AlertVariant } from './Alert'
 
 const VARIANTS: AlertVariant[] = ['success', 'danger', 'warning', 'info', 'neutral']
 

packages/ui/src/components/Button/Button.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import Link from 'next/link'
 import React from 'react'
-import { Button } from '@ui/components/Button'
+import { Button } from './Button'
 
 const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const
 const TYPES = [

packages/ui/src/components/Button/Button.tsx

@@ -2,12 +2,13 @@
 
 import { Slot } from '@radix-ui/react-slot'
 import { VariantProps, cva } from 'class-variance-authority'
-import { IconContext } from '@ui/components/Icon/IconContext'
-import { IconLoader } from '@ui/components/Icon/icons/IconLoader'
-import { sizes } from '@ui/lib/commonCva'
-import { cn } from '@ui/lib/utils'
 import { cloneElement, forwardRef, isValidElement } from 'react'
 
+import { sizes } from '../../lib/commonCva'
+import { cn } from '../../lib/utils/cn'
+import { IconContext } from '../Icon/IconContext'
+import { IconLoader } from '../Icon/icons/IconLoader'
+
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
   `relative 

packages/ui/src/components/Card/Card.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
-import Typography from '../Typography'
-// @ts-ignore
-import CardStyles from './Card.module.css'
 
 import styleHandler from '../../lib/theme/styleHandler'
+import Typography from '../Typography'
 
 interface CardProps {
   children?: React.ReactNode
@@ -16,15 +14,7 @@ interface CardProps {
   titleExtra?: React.ReactNode
 }
 
-function Card({
-  children,
-  className,
-  cover,
-  hoverable,
-  style,
-  title,
-  titleExtra,
-}: CardProps) {
+function Card({ children, className, cover, hoverable, style, title, titleExtra }: CardProps) {
   let __styles = styleHandler('card')
 
   let classes = [__styles.base]

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -1,13 +1,10 @@
-import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import { CheckboxContext } from './CheckboxContext'
-// @ts-ignore
-import CheckboxStyles from './Checkbox.module.css'
+import React from 'react'
 
-import defaultTheme from '../../lib/theme/defaultTheme'
-
-import { useFormContext } from '../Form/FormContext'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
+import CheckboxStyles from './Checkbox.module.css'
+import { CheckboxContext } from './CheckboxContext'
 
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   afterLabel?: string

packages/ui/src/components/Command/Command.icons.tsx

@@ -1,5 +1,4 @@
-import { AiIconAnimation } from '@ui/layout/ai-icon-animation'
-import { cn } from '@ui/lib/utils'
+import { AiIconAnimation } from '../../layout/ai-icon-animation/ai-icon-animation'
 
 interface AiIconProps {
   className?: string

packages/ui/src/components/Command/CommandMenu.tsx

@@ -1,20 +1,24 @@
+import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import * as React from 'react'
-import { IconHome } from '../Icon/icons/IconHome'
 
+import { AiIconAnimation } from '../../layout/ai-icon-animation/ai-icon-animation'
+import { IconHome } from '../Icon/icons/IconHome'
 import { IconArrowRight } from './../Icon/icons/IconArrowRight'
 import { IconBook } from './../Icon/icons/IconBook'
 import { IconColumns } from './../Icon/icons/IconColumns'
 import { IconInbox } from './../Icon/icons/IconInbox'
+import { IconKey } from './../Icon/icons/IconKey'
 import { IconLifeBuoy } from './../Icon/icons/IconLifeBuoy'
+import { IconLink } from './../Icon/icons/IconLink'
 import { IconMonitor } from './../Icon/icons/IconMonitor'
 import { IconPhone } from './../Icon/icons/IconPhone'
 import { IconUser } from './../Icon/icons/IconUser'
-import { IconKey } from './../Icon/icons/IconKey'
-import { IconLink } from './../Icon/icons/IconLink'
-
+import APIKeys from './APIKeys'
 import AiCommand from './AiCommand'
-import sharedItems from './utils/shared-nav-items.json'
+import ChildItem from './ChildItem'
+import { BadgeExperimental } from './Command.Badges'
+import { COMMAND_ROUTES } from './Command.constants'
 import { AiIcon } from './Command.icons'
 import {
   CommandDialog,
@@ -26,19 +30,13 @@ import {
   FORCE_MOUNT_ITEM,
   copyToClipboard,
 } from './Command.utils'
-import { COMMAND_ROUTES } from './Command.constants'
 import { useCommandMenu } from './CommandMenuProvider'
-
+import CommandMenuShortcuts from './CommandMenuShortcuts'
 import DocsSearch from './DocsSearch'
 import GenerateSQL from './GenerateSQL'
-import ThemeOptions from './ThemeOptions'
-import APIKeys from './APIKeys'
 import SearchableStudioItems from './SearchableStudioItems'
-import CommandMenuShortcuts from './CommandMenuShortcuts'
-import { BadgeExperimental } from './Command.Badges'
-import { AiIconAnimation } from '@ui/layout/ai-icon-animation'
-import ChildItem from './ChildItem'
-import { useParams } from 'common'
+import ThemeOptions from './ThemeOptions'
+import sharedItems from './utils/shared-nav-items.json'
 
 export const CHAT_ROUTES = [
   COMMAND_ROUTES.AI, // this one is temporary

packages/ui/src/components/CountdownWidget/CountdownStep.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 interface CountdownStepProps {
   value: string | number

packages/ui/src/components/GlassPanel/GlassPanel.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from 'next-themes'
-import * as React from 'react'
 import Image from 'next/image'
-import { cn } from '../../lib/utils'
+import * as React from 'react'
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   title: string

packages/ui/src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import styleHandler from '../../lib/theme/styleHandler'
 import { IconContext } from './IconContext'
+
+import styleHandler from '../../lib/theme/styleHandler'
 // @ts-ignore
 // import IconStyles from './Icon.module.css'
 

packages/ui/src/components/Icon/IconBase.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 import { IconContext } from './IconContext'
 // @ts-ignore
 // import IconStyles from './Icon.module.css'

packages/ui/src/components/Icon/IconContext.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'react'
+
 import { SizeVariantProps } from '../../lib/commonCva'
 
 type ContextValue = { contextSize?: SizeVariantProps; className?: string }

packages/ui/src/components/Input/Input.tsx

@@ -1,17 +1,14 @@
 import React, { useEffect, useState } from 'react'
-import { Button } from '../Button'
-import { IconCopy } from '../Icon/icons/IconCopy'
-
-import { FormLayout } from '../../lib/Layout/FormLayout'
 
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { HIDDEN_PLACEHOLDER } from './../../lib/constants'
-
-import { cn } from '@ui/lib/utils/cn'
+import { HIDDEN_PLACEHOLDER } from '../../lib/constants'
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
+import { Button } from '../Button'
 import { useFormContext } from '../Form/FormContext'
+import { IconCopy } from '../Icon/icons/IconCopy'
 
 export interface Props
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onCopy'> {

packages/ui/src/components/InputNumber/InputNumber.tsx

@@ -1,15 +1,14 @@
 import React, { useEffect } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
+
 // import { IconChevronDown } from '../Icon/icons/IconChevronDown'
 // import { IconChevronUp } from '../Icon/icons/IconChevronUp'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
+import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { useFormContext } from '../Form/FormContext'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
 
-export interface Props
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   defaultValue?: string | number
   descriptionText?: string | React.ReactNode
   error?: string
@@ -46,14 +45,8 @@ function InputNumber({
 }: Props) {
   const __styles = styleHandler('inputNumber')
 
-  const {
-    formContextOnChange,
-    values,
-    errors,
-    handleBlur,
-    touched,
-    fieldLevelValidation,
-  } = useFormContext()
+  const { formContextOnChange, values, errors, handleBlur, touched, fieldLevelValidation } =
+    useFormContext()
 
   if (values && !value) value = values[id || name]
 

packages/ui/src/components/Listbox/Listbox2.tsx

@@ -2,11 +2,11 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { flatten } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 
-import { cn } from '@ui/lib/utils'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
 import { useFormContext } from '../Form/FormContext'
 import { IconCheck } from '../Icon/icons/IconCheck'
 import { SelectContext } from './SelectContext'

packages/ui/src/components/Loading/Loading.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
+
 import styleHandler from '../../lib/theme/styleHandler'
-import { IconLoader } from './../../../index'
+import IconLoader from '../Icon/icons/IconLoader/IconLoader'
 
 interface Props {
   children: React.ReactNode

packages/ui/src/components/LoadingLine/LoadingLine.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 export const LoadingLine = ({ loading }: { loading: boolean }) => {
   return (

packages/ui/src/components/Menu/Menu.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
+import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
 import Typography from '../Typography'
 import { MenuContextProvider, useMenuContext } from './MenuContext'
 
-import styleHandler from '../../lib/theme/styleHandler'
-import { cn } from '@ui/lib/utils'
-
 interface MenuProps {
   children: React.ReactNode
   className?: string

packages/ui/src/components/Modal/Modal.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import React, { useEffect } from 'react'
-// @ts-ignore
-import ModalStyles from './Modal.module.css'
-import { Button, IconX, Space } from './../../../index'
-import { cn } from '@ui/lib/utils'
-import { AnimationTailwindClasses } from '../../types'
-
 import * as Dialog from '@radix-ui/react-dialog'
+import React, { useEffect } from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
+import { AnimationTailwindClasses } from '../../types'
+import { Button } from '../Button/Button'
+import IconX from '../Icon/icons/IconX/IconX'
+import Space from '../Space/Space'
 
 // import { Transition } from '@tailwindui/react'
 // Merge Radix Props to surface in the modal component

packages/ui/src/components/NavMenu/index.tsx

@@ -1,5 +1,5 @@
-import { cn } from '@ui/lib/utils'
 import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react'
+import { cn } from '../../lib/utils/cn'
 
 interface NavMenuProps extends HTMLAttributes<HTMLDivElement> {}
 

packages/ui/src/components/Popover/Popover.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import type * as RadixPopoverTypes from '@radix-ui/react-popover'
 import * as RadixPopover from '@radix-ui/react-popover'
-import type * as RadixPopoverTypes from '@radix-ui/react-popover/'
+import * as React from 'react'
 
-import { IconX } from '../Icon/icons/IconX'
 import styleHandler from '../../lib/theme/styleHandler'
+import { IconX } from '../Icon/icons/IconX'
 
 interface RootProps {
   align?: RadixPopoverTypes.PopoverContentProps['align']

packages/ui/src/components/PromoToast/PromoBg.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   className?: string

packages/ui/src/components/Radio/Radio.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
-import { RadioContext } from './RadioContext'
-
-import { useFormContext } from '../Form/FormContext'
 
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
-
+import { useFormContext } from '../Form/FormContext'
 import { generateUID } from './../../lib/utils/randomIdGenerator'
+import { RadioContext } from './RadioContext'
 
 interface GroupProps {
   allowedValues?: any

packages/ui/src/components/Select/Select.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import InputErrorIcon from '../../lib/Layout/InputErrorIcon'
 import InputIconContainer from '../../lib/Layout/InputIconContainer'
-
-import { useFormContext } from '../Form/FormContext'
-
-import defaultTheme from '../../lib/theme/defaultTheme'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useFormContext } from '../Form/FormContext'
 
 interface OptionProps {
   value: string

packages/ui/src/components/SidePanel/SidePanel.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions'
-import React, { useState } from 'react'
-import { Button, Space, Typography } from '../../index'
+import { useState } from 'react'
 
+import { Button } from '../Button'
+import { Space } from '../Space'
 import { SidePanel } from './index'
 
 export default {
@@ -237,7 +238,7 @@ customFooter.args = {
   customFooter: [
     <Space>
       <Button type="secondary">Cancel</Button>
-      <Button danger>Delete</Button>
+      <Button type="danger">Delete</Button>
     </Space>,
   ],
 }

packages/ui/src/components/ThemeImage/ThemeImage.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
-import { cn } from '@ui/lib/utils'
+import { useEffect, useState } from 'react'
+
+import { cn } from '../../lib/utils/cn'
 
 export const ThemeImage = ({ src, ...props }: any) => {
   const { resolvedTheme } = useTheme()

packages/ui/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,8 +1,6 @@
-import React, { useLayoutEffect, useMemo } from 'react'
-import { createContext } from 'react'
+import React, { createContext, useMemo } from 'react'
 
 import defaultTheme from '../../lib/theme/defaultTheme'
-
 import { mergeDeep } from './../../lib/utils'
 // import useDarkMode from './utils/useDarkMode'
 

packages/ui/src/components/Toggle/Toggle.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 import styleHandler from '../../lib/theme/styleHandler'
 import { useFormContext } from '../Form/FormContext'
 

packages/ui/src/components/Upload/Upload.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { FormLayout } from '../../lib/Layout/FormLayout'
+import React from 'react'
+import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 // @ts-ignore
 // import UploadStyles from './Upload.module.css'
 

packages/ui/src/components/shadcn/stories/Accordion.stories.tsx

@@ -1,9 +1,9 @@
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@ui/components/shadcn/ui/accordion'
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '../ui/accordion'
 // Button.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react'

packages/ui/src/components/shadcn/stories/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Alert, AlertDescription, AlertTitle } from '@ui/components/shadcn/ui/alert'
 import { AlertCircle, Info } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert'
 
 const meta: Meta<typeof Alert> = {
   title: 'shadcn/Alert',

packages/ui/src/components/shadcn/stories/AlertDialog.stories.tsx

@@ -1,16 +1,15 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@ui/components/shadcn/ui/alert-dialog'
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '../ui/alert-dialog'
 
 const meta: Meta<typeof AlertDialog> = {
   title: 'shadcn/AlertDialog',

packages/ui/src/components/shadcn/stories/AspectRatio.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import { AspectRatio } from '@ui/components/shadcn/ui/aspect-ratio'
+import { AspectRatio } from '../ui/aspect-ratio'
 
 const meta: Meta<typeof AspectRatio> = {
   title: 'shadcn/AspectRatio',

packages/ui/src/components/shadcn/stories/Avatar.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
-import { Avatar, AvatarFallback, AvatarImage } from '@ui/components/shadcn/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
 
 const meta: Meta<typeof Avatar> = {
   title: 'Shadcn/Avatar',

packages/ui/src/components/shadcn/stories/Badge.stories.tsx

@@ -1,5 +1,5 @@
-import { Badge, BadgeProps } from '@ui/components/shadcn/ui/badge'
 import { Meta } from '@storybook/react'
+import { Badge, BadgeProps } from '../ui/badge'
 
 const meta: Meta = {
   title: 'shadcn/Badge',

packages/ui/src/components/shadcn/stories/Button.stories.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@ui/components/shadcn/ui/button'
 import { Meta } from '@storybook/react'
 import { ChevronRight, Loader2, Mail } from 'lucide-react'
+import { Button } from '../ui/button'
 // import Link from 'next/link'
 
 const meta: Meta = {

packages/ui/src/components/shadcn/stories/Calendar.stories.tsx

@@ -1,24 +1,6 @@
-import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { cn } from '@ui/lib/utils'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
 import * as React from 'react'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+import { Calendar } from '../ui/calendar'
 
 const meta: Meta = {
   title: 'shadcn/Calendar',

packages/ui/src/components/shadcn/stories/Card.stories.tsx

@@ -1,25 +1,12 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@ui/components/shadcn/ui/card'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { Switch } from '@ui/components/shadcn/ui/switch'
-import { cn } from '@ui/lib/utils'
 import { BellRing, Check } from 'lucide-react'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
 
 const meta: Meta = {
   title: 'shadcn/Card',

packages/ui/src/components/shadcn/stories/Checkbox.stories.tsx

@@ -1,17 +1,17 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
+import { Button } from '../ui/button'
+import { Checkbox } from '../ui/checkbox'
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { toast } from '../ui/use-toast'
 // import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'

packages/ui/src/components/shadcn/stories/Collapsible.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@ui/components/shadcn/ui/collapsible'
 import { ChevronsUpDown } from 'lucide-react'
 import * as React from 'react'
+import { Button } from '../ui/button'
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '../ui/collapsible'
 
 const meta: Meta = {
   title: 'shadcn/Collapsible',

packages/ui/src/components/shadcn/stories/ComboBox.stories.tsx

@@ -1,39 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@ui/components/shadcn/ui/command'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@ui/components/shadcn/ui/dropdown-menu'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { cn } from '@ui/lib/utils'
 import {
   ArrowUpCircle,
   Calendar,
@@ -52,6 +18,40 @@ import {
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../ui/command'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta<typeof DropdownMenu> = {
   /* 👇 The title prop is optional.

packages/ui/src/components/shadcn/stories/Command.stories.tsx

@@ -1,17 +1,17 @@
 import { Meta } from '@storybook/react'
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@ui/components/shadcn/ui/command'
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
 import * as React from 'react'
+import {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from '../ui/command'
 
 const meta: Meta = {
   title: 'shadcn/Command',

packages/ui/src/components/shadcn/stories/ContextMenu.stories.tsx

@@ -1,19 +1,19 @@
 import { Meta } from '@storybook/react'
 import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from '@ui/components/shadcn/ui/context-menu'
+    ContextMenu,
+    ContextMenuCheckboxItem,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuLabel,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from '../ui/context-menu'
 
 const meta: Meta = {
   title: 'shadcn/ContextMenu',

packages/ui/src/components/shadcn/stories/DatePicker.stories.tsx

@@ -1,3 +1,14 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Meta } from '@storybook/react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import * as React from 'react'
+import { DateRange } from 'react-day-picker'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { cn } from '../../../lib/utils/cn'
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
 import {
   Form,
   FormControl,
@@ -6,27 +17,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { cn } from '@ui/lib/utils'
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import * as React from 'react'
-import { DateRange } from 'react-day-picker'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+} from '../ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/DatePicker',

packages/ui/src/components/shadcn/stories/Dialog.stories.tsx

@@ -1,16 +1,16 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from '../ui/button'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@ui/components/shadcn/ui/dialog'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '../ui/dialog'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
 
 const meta: Meta = {
   title: 'shadcn/Dialog',

packages/ui/src/components/shadcn/stories/DropdownMenu.stories.tsx

@@ -1,36 +1,36 @@
-import React from 'react'
+import { DropdownMenuCheckboxItemProps, DropdownMenuProps } from '@radix-ui/react-dropdown-menu'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@ui/components/shadcn/ui/dropdown-menu'
-import {
-  Cloud,
-  Github,
-  LifeBuoy,
-  LogOut,
-  Mail,
-  MessageSquare,
-  Plus,
-  PlusCircle,
-  UserPlus,
-  Users,
+    Cloud,
+    Github,
+    LifeBuoy,
+    LogOut,
+    Mail,
+    MessageSquare,
+    Plus,
+    PlusCircle,
+    UserPlus,
+    Users,
 } from 'lucide-react'
-import { DropdownMenuProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+import React from 'react'
+import { Button } from '../ui/button'
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
 
 type Checked = DropdownMenuCheckboxItemProps['checked']
 

packages/ui/src/components/shadcn/stories/Form.stories.tsx

@@ -2,22 +2,15 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { cn } from '@ui/lib/utils'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
-import { Calendar } from '@ui/components/shadcn/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui//popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui//select'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+import { cn } from '../../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui//popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui//select'
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
 import {
   Form,
   FormControl,
@@ -26,8 +19,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Input } from '@ui/components/shadcn/ui/input'
+} from '../ui/form'
+import { Input } from '../ui/input'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta<typeof Form> = {
   /* 👇 The title prop is optional.

packages/ui/src/components/shadcn/stories/HoverCard.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Avatar, AvatarFallback, AvatarImage } from '@ui/components/shadcn/ui/avatar'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@ui/components/shadcn/ui/hover-card'
 import { CalendarDays } from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Button } from '../ui/button'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card'
 
 const meta: Meta = {
   title: 'shadcn/HoverCard',

packages/ui/src/components/shadcn/stories/Input.stories.tsx

@@ -1,20 +1,20 @@
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { toast } from '../ui/use-toast'
 
 const FormSchema = z.object({
   username: z.string().min(2, {

packages/ui/src/components/shadcn/stories/Label.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
 
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
-import { Label } from '@ui/components/shadcn/ui/label'
+import { Checkbox } from '../ui/checkbox'
+import { Label } from '../ui/label'
 
 const meta: Meta = {
   title: 'shadcn/Label',

packages/ui/src/components/shadcn/stories/MenuBar.stories.tsx

@@ -1,20 +1,19 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
 import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from '@ui/components/shadcn/ui/menubar'
+    Menubar,
+    MenubarCheckboxItem,
+    MenubarContent,
+    MenubarItem,
+    MenubarMenu,
+    MenubarRadioGroup,
+    MenubarRadioItem,
+    MenubarSeparator,
+    MenubarShortcut,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarTrigger,
+} from '../ui/menubar'
 
 const meta: Meta = {
   title: 'shadcn/Menubar',

packages/ui/src/components/shadcn/stories/NavigationMenu.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
 import * as React from 'react'
 // import Link from 'next/link'
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -10,8 +9,7 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from '@ui/components/shadcn/ui/navigation-menu'
+} from '../ui/navigation-menu'
 
 const meta: Meta = {
   title: 'shadcn/NavigationMenu',

packages/ui/src/components/shadcn/stories/Popover.stories.tsx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 
 const meta: Meta = {
   title: 'shadcn/Popover',

packages/ui/src/components/shadcn/stories/Progress.stories.tsx

@@ -1,6 +1,6 @@
-import { Progress } from '@ui/components/shadcn/ui/progress'
 import { Meta } from '@storybook/react'
 import * as React from 'react'
+import { Progress } from '../ui/progress'
 
 const meta: Meta = {
   title: 'shadcn/Progress',

packages/ui/src/components/shadcn/stories/RadioGroup.stories.tsx

@@ -1,19 +1,19 @@
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { RadioGroup, RadioGroupItem } from '@ui/components/shadcn/ui/radio-group'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/RadioGroup',

packages/ui/src/components/shadcn/stories/ScrollArea.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
-import { ScrollArea } from '@ui/components/shadcn/ui/scroll-area'
-import { Separator } from '@ui/components/shadcn/ui/separator'
 import * as React from 'react'
+import { ScrollArea } from '../ui/scroll-area'
+import { Separator } from '../ui/separator'
 
 const meta: Meta = {
   title: 'shadcn/ScrollArea',

packages/ui/src/components/shadcn/stories/Select.stories.tsx

@@ -1,30 +1,29 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Card } from '@ui/components/shadcn/ui/card'
+import { Button } from '../ui/button'
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@ui/components/shadcn/ui/form'
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form'
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '../ui/select'
+import { toast } from '../ui/use-toast'
 // import Link from 'next/link'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
-import { SelectSeparator } from '@ui/components/shadcn/ui/select'
+import { SelectSeparator } from '../ui/select'
 
 const meta: Meta = {
   title: 'shadcn/Select',

packages/ui/src/components/shadcn/stories/Seperator.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Separator } from '@ui/components/shadcn/ui/separator'
+import { Separator } from '../ui/separator'
 
 const meta: Meta = {
   title: 'shadcn/Separator',

packages/ui/src/components/shadcn/stories/Sheet.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
 import {
   Sheet,
   SheetClose,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@ui/components/shadcn/ui/sheet'
+} from '../ui/sheet'
 
 const meta: Meta = {
   title: 'shadcn/Sheet',

packages/ui/src/components/shadcn/stories/Skeleton.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Skeleton } from '@ui/components/shadcn/ui/skeleton'
+import { Skeleton } from '../ui/skeleton'
 
 const meta: Meta = {
   title: 'shadcn/Skeleton',

packages/ui/src/components/shadcn/stories/Slider.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Slider } from '@ui/components/shadcn/ui/slider'
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
+import { Slider } from '../ui/slider'
 
 const meta: Meta = {
   title: 'shadcn/Slider',

packages/ui/src/components/shadcn/stories/Switch.stories.tsx

@@ -1,19 +1,19 @@
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Meta } from '@storybook/react'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Switch } from '@ui/components/shadcn/ui/switch'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
+import { Button } from '../ui/button'
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { Switch } from '../ui/switch'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/Switch',

packages/ui/src/components/shadcn/stories/Table.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta } from '@storybook/react'
 import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@ui/components/shadcn/ui/table'
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '../ui/table'
 
 const invoices = [
   {

packages/ui/src/components/shadcn/stories/Tabs.stories.tsx

@@ -1,16 +1,10 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@ui/components/shadcn/ui/card'
-import { Input } from '@ui/components/shadcn/ui/input'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ui/components/shadcn/ui/tabs'
+import { Button } from '../ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../ui/card'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs/tabs'
+
 
 const meta: Meta = {
   title: 'shadcn/Tabs',

packages/ui/src/components/shadcn/stories/TextArea.stories.tsx

@@ -1,4 +1,8 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Meta } from '@storybook/react'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { Button } from '../ui/button'
 import {
   Form,
   FormControl,
@@ -7,13 +11,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@ui/components/shadcn/ui/form'
-import { toast } from '@ui/components/shadcn/ui/use-toast'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Meta } from '@storybook/react'
-import { Textarea } from '@ui/components/shadcn/ui/textarea'
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
+} from '../ui/form'
+import { Label } from '../ui/label'
+import { Textarea } from '../ui/textarea'
+import { toast } from '../ui/use-toast'
 
 const meta: Meta = {
   title: 'shadcn/Textarea',

packages/ui/src/components/shadcn/stories/Toast.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
-import { Button } from '@ui/components/shadcn/ui/button'
-import { ToastAction } from '@ui/components/shadcn/ui/toast'
-import { useToast } from '@ui/components/shadcn/ui/use-toast'
+import { Button } from '../ui/button'
+import { ToastAction } from '../ui/toast'
+import { useToast } from '../ui/use-toast'
+
 
 const meta: Meta = {
   title: 'shadcn/Toast',

packages/ui/src/components/shadcn/stories/Toggle.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/react'
-import { Toggle } from '@ui/components/shadcn/ui/toggle'
-import { Bold, Italic } from 'lucide-react'
-import { Underline } from 'lucide-react'
+import { Bold, Italic, Underline } from 'lucide-react'
+import { Toggle } from '../ui/toggle'
 
 const meta: Meta = {
   title: 'shadcn/Toggle',

packages/ui/src/components/shadcn/stories/Tooltip.stories.tsx

@@ -1,11 +1,7 @@
 import { Meta } from '@storybook/react'
-import { Button } from '@ui/components/shadcn/ui/button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@ui/components/shadcn/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+import { Button } from '../ui/button'
+
 
 const meta: Meta = {
   title: 'shadcn/Tooltip',

packages/ui/src/components/shadcn/stories/_TEMPLATE.stories_.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { Card } from '@ui/components/shadcn/ui/card'
+import { Card } from '../ui/card'
 
 const meta: Meta = {
   title: 'shadcn/Card',

packages/ui/src/components/shadcn/ui/accordion.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Accordion = AccordionPrimitive.Root
 
@@ -51,4 +51,4 @@ const AccordionContent = React.forwardRef<
 ))
 AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

packages/ui/src/components/shadcn/ui/alert-dialog.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
-import { buttonVariants } from '@ui/components/shadcn/ui/button'
+import { cn } from '../../../lib/utils/cn'
+import { buttonVariants } from './button'
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -111,12 +111,12 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 }

packages/ui/src/components/shadcn/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 // Ivan: replaced [&:has(svg)]:pl-14 with [&>svg~*]:pl-10 cause of github.com/shadcn-ui/ui/issues/998
 export const alertVariants = cva(
@@ -51,4 +51,4 @@ const AlertDescription = React.forwardRef<
 ))
 AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle }

packages/ui/src/components/shadcn/ui/avatar.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -44,4 +44,4 @@ const AvatarFallback = React.forwardRef<
 ))
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarFallback, AvatarImage }

packages/ui/src/components/shadcn/ui/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const badgeVariants = cva(
   'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10',

packages/ui/src/components/shadcn/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-muted focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

packages/ui/src/components/shadcn/ui/calendar.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import * as React from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 
-import { cn } from '@ui/lib/utils'
-import { buttonVariants } from '@ui/components/shadcn/ui/button'
+import { cn } from '../../../lib/utils/cn'
+import { buttonVariants } from './button'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 

packages/ui/src/components/shadcn/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
@@ -53,4 +53,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardFooter.displayName = 'CardFooter'
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

packages/ui/src/components/shadcn/ui/checkbox.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

packages/ui/src/components/shadcn/ui/command.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
 import { DialogProps } from '@radix-ui/react-dialog'
 import { Command as CommandPrimitive } from 'cmdk'
 import { Search } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
-import { Dialog, DialogContent } from '@ui/components/shadcn/ui/dialog'
+import { cn } from '../../../lib/utils/cn'
+import { Dialog, DialogContent } from './dialog'
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -137,11 +137,11 @@ CommandShortcut.displayName = 'CommandShortcut'
 export {
   Command,
   CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
+  CommandShortcut,
 }

packages/ui/src/components/shadcn/ui/context-menu.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const ContextMenu = ContextMenuPrimitive.Root
 
@@ -172,18 +172,18 @@ ContextMenuShortcut.displayName = 'ContextMenuShortcut'
 
 export {
   ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
   ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
   ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+  ContextMenuTrigger,
 }

packages/ui/src/components/shadcn/ui/dialog.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const Dialog = DialogPrimitive.Root
 
@@ -94,10 +94,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 }

packages/ui/src/components/shadcn/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -166,18 +166,18 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 }

packages/ui/src/components/shadcn/ui/form.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
 import {
   Controller,
   ControllerProps,
@@ -10,8 +10,8 @@ import {
   useFormContext,
 } from 'react-hook-form'
 
-import { cn } from '@ui/lib/utils'
-import { Label } from '@ui/components/shadcn/ui/label'
+import { cn } from '../../../lib/utils/cn'
+import { Label } from './label'
 
 const Form = FormProvider
 
@@ -156,12 +156,12 @@ const FormMessage = React.forwardRef<
 FormMessage.displayName = 'FormMessage'
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
   FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
 }

packages/ui/src/components/shadcn/ui/hover-card.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import * as React from 'react'
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 const HoverCard = HoverCardPrimitive.Root
 
@@ -26,4 +26,4 @@ const HoverCardContent = React.forwardRef<
 ))
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardContent, HoverCardTrigger }

packages/ui/src/components/shadcn/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { cn } from '@ui/lib/utils'
+import { cn } from '../../../lib/utils/cn'
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}