Create separate Shadcn files

src/lib/inline/CSFAutorefresh.tsx

@@ -4,7 +4,9 @@ import type React from 'react';
 import { type SVGProps, useEffect, useRef, useState } from 'react';
 import { cn } from '~lib/utils';
 import { MaterialSymbolsAvgTimeOutlineRounded } from '~popup/components/Icons';
-import { Badge, Button, Switch } from '~popup/components/Shadcn';
+import { Badge } from '~popup/ui/badge';
+import { Button } from '~popup/ui/button';
+import { Switch } from '~popup/ui/switch';
 
 export function MaterialSymbolsUpdate(props: SVGProps<SVGSVGElement>) {
 	return (

src/lib/inline/CSFBargainButtons.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useState } from 'react';
-import { Button, MultiplierInput } from '~popup/components/Shadcn';
+import { Button } from '~popup/ui/button';
+import { MultiplierInput } from '~popup/ui/input';
 
 type PricingData = {
 	buff_name: string;

src/lib/inline/CSFMenuControl.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import type React from 'react';
 import { type SVGProps, useState } from 'react';
 import { cn } from '~lib/utils';
-import { Button } from '~popup/components/Shadcn';
+import { Button } from '~popup/ui/button';
 
 export function BxBxsChevronLeft(props: SVGProps<SVGSVGElement>) {
 	return (

src/lib/inline/CSFQuickMenu.tsx

@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 import type React from 'react';
-import { Button } from '~popup/components/Shadcn';
+import { Button } from '~popup/ui/button';
 
 type QuickMenuButtonProps = {
 	label: string;

src/lib/inline/CSFThemeToggle.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import type React from 'react';
 import { type SVGProps, useEffect, useRef, useState } from 'react';
 import { cn } from '~lib/utils';
-import { Button } from '~popup/components/Shadcn';
+import { Button } from '~popup/ui/button';
 
 export function LucidePalette(props: SVGProps<SVGSVGElement>) {
 	return (

src/lib/inline/LiveFilter.tsx

@@ -4,7 +4,8 @@ import { useEffect, useState } from 'react';
 import { DEFAULT_FILTER, type SPFilter } from '~lib/util/storage';
 import { cn } from '~lib/utils';
 import { CarbonFilterReset, MaterialSymbolsCloseSmallOutlineRounded, MaterialSymbolsFilterAlt } from '~popup/components/Icons';
-import { Button, Label } from '~popup/components/Shadcn';
+import { Button } from '~popup/ui/button';
+import { Label } from '~popup/ui/label';
 
 interface TypeCheckboxProps {
 	label: string;

src/lib/inline/SpBuffContainer.tsx

@@ -1,8 +1,9 @@
-import type React from 'react';
 import { AvailableMarketSources, ICON_ARROWUP, ICON_BUFF, ICON_EXCLAMATION, MarketSource } from '~lib/util/globals';
 import { cn } from '~lib/utils';
 import { MaterialSymbolsCloseSmallOutlineRounded } from '~popup/components/Icons';
-import { Badge, Button, Popover, PopoverClose, PopoverContent, PopoverTrigger } from '~popup/components/Shadcn';
+import { Badge } from '~popup/ui/badge';
+import { Button } from '~popup/ui/button';
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '~popup/ui/popover';
 
 type BuffItem = {
 	source: MarketSource;

src/popup/components/SettingsAltMarket.tsx

@@ -2,9 +2,10 @@ import { useStorage } from '@plasmohq/storage/hook';
 import { useEffect, useState } from 'react';
 import { MarketSource } from '~lib/util/globals';
 import { MaterialSymbolsHelpOutline } from '~popup/components/Icons';
+import { Label } from '~popup/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~popup/ui/select';
 import type { SourceInfo } from './SettingsSource';
 import { SettingsTooltip } from './SettingsTooltip';
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Shadcn';
 
 type SelectProps = {
 	prefix: string;

src/popup/components/SettingsCard.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { cn } from '~lib/utils';
-import { Card, CardContent } from './Shadcn';
+import { Card, CardContent } from '~popup/ui/card';
 
 export const SettingsCard = ({ children, className }: { children: ReactNode; className?: string }) => {
 	return (

src/popup/components/SettingsCheckbox.tsx

@@ -3,8 +3,10 @@ import type { IconProps } from '@radix-ui/react-icons/dist/types';
 import type { ReactElement, SVGProps } from 'react';
 import { cn, toast } from '~lib/utils';
 import { MaterialSymbolsHelpOutline } from '~popup/components/Icons';
+import { Badge } from '~popup/ui/badge';
+import { Checkbox } from '~popup/ui/checkbox';
+import { Label } from '~popup/ui/label';
 import { SettingsTooltip } from './SettingsTooltip';
-import { Badge, Checkbox, Label } from './Shadcn';
 
 type CheckboxProps = {
 	id: string;

src/popup/components/SettingsColorPicker.tsx

@@ -1,8 +1,11 @@
 import { useStorage } from '@plasmohq/storage/hook';
 import { useEffect, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
+import { Button } from '~popup/ui/button';
+import { Card, CardContent } from '~popup/ui/card';
+import { Label } from '~popup/ui/label';
+import { Popover, PopoverColorPicker, PopoverTrigger } from '~popup/ui/popover';
 import { IcOutlineColorLens, MaterialSymbolsRefresh } from './Icons';
-import { Button, Card, CardContent, Label, Popover, PopoverColorPicker, PopoverTrigger } from './Shadcn';
 
 const SingleColorPicker = ({ text, initColor, setStoreValue }: { text: string; initColor: string; setStoreValue: (newColor: string) => void }) => {
 	const [color, setColor] = useState(initColor);

src/popup/components/SettingsEnable.tsx

@@ -1,5 +1,6 @@
 import { useStorage } from '@plasmohq/storage/hook';
-import { EnableSwitch, Label } from './Shadcn';
+import { Label } from '~popup/ui/label';
+import { EnableSwitch } from '~popup/ui/switch';
 
 export const SettingsEnable = ({ id }: { id: string }) => {
 	const [checked, setChecked] = useStorage(id);

src/popup/components/SettingsSelect.tsx

@@ -2,8 +2,9 @@ import { useStorage } from '@plasmohq/storage/hook';
 import type { IconProps } from '@radix-ui/react-icons/dist/types';
 import { type ReactElement, useEffect, useState } from 'react';
 import { MaterialSymbolsHelpOutline } from '~popup/components/Icons';
+import { Label } from '~popup/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~popup/ui/select';
 import { SettingsTooltip } from './SettingsTooltip';
-import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Shadcn';
 
 type SelectProps = {
 	id: string;

src/popup/components/SettingsSource.tsx

@@ -7,12 +7,15 @@ import { useStorage } from '@plasmohq/storage/hook';
 import type { SVGProps } from 'react';
 import { MarketSource } from '~lib/util/globals';
 import { cn } from '~lib/utils';
+import { Badge } from '~popup/ui/badge';
+import { Button } from '~popup/ui/button';
+import { Card, CardContent } from '~popup/ui/card';
+import { Label } from '~popup/ui/label';
 import { MaterialSymbolsHelpOutline } from './Icons';
 import { SettingsAltMarket } from './SettingsAltMarket';
 import { SettingsCheckbox } from './SettingsCheckbox';
 import { SettingsSelect } from './SettingsSelect';
 import { SettingsTooltip } from './SettingsTooltip';
-import { Badge, Button, Card, CardContent, Label } from './Shadcn';
 
 export function MaterialSymbolsLightStorefrontOutline(props: SVGProps<SVGSVGElement>) {
 	return (

src/popup/components/SettingsTextbox.tsx

@@ -2,8 +2,9 @@ import { useStorage } from '@plasmohq/storage/hook';
 import type { IconProps } from '@radix-ui/react-icons/dist/types';
 import type { ReactElement } from 'react';
 import { MaterialSymbolsHelpOutline } from '~popup/components/Icons';
+import { Input } from '~popup/ui/input';
+import { Label } from '~popup/ui/label';
 import { SettingsTooltip } from './SettingsTooltip';
-import { Input, Label } from './Shadcn';
 
 type TextboxProps = {
 	id: string;

src/popup/components/SettingsTooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Shadcn';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~popup/ui/tooltip';
 
 export const SettingsTooltip = ({
 	text,